在 Html2Canvas 中渲染時，頁面會滾動到頂部

Question

我正在使用 html2canvas 庫，使用以下代碼：

html2canvas(document.body, {
   onrendered: function(canvas) {
      document.body.appendChild(canvas);
   }
});

當onrendered被觸發時，頁面會自動滾動到頂部。 無論如何我們可以保持我們的滾動位置而不是自動帶到頁面頂部？

Answer 1

我查看了 html2canvas.js 並看到以下行：

_html2canvas.Parse = function (images, options) {
    window.scroll(0,0);

在將window.scroll(0,0)注釋掉后，它在我的本地測試中對我來說效果很好。 似乎這種行為是作者有意為之。

當然，您也可以在觸發代碼時將當前滾動位置保存到變量中。 您可以采用的方式取決於您如何執行 html2canvas。 如果它是一個類似於演示頁面上的按鈕，您可以向該按鈕添加一個事件偵聽器：

var scrollPos;
document.querySelector("screenshotButton").addEventListener("click",function() {
    scrollPos = document.body.scrollTop;
    html2canvas(document.body, {
       onrendered: function(canvas) {
          document.body.appendChild(canvas);
          window.scrollTo(0,scrollPos);
       }
    });
 });

Answer 2

你應該可以調整scrollY位置，相對於當前pageYOffset，試試這個

html2canvas(document.body, { scrollY: (window.pageYOffset * -1) })