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) })

在Html2Canvas中渲染时，页面将滚动到顶部

2 个答案: