javascript - 在 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

您应该能够相对于当前 pageYOffset 调整 scrollY 位置，试试这个

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