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

【问题标题】：On render in Html2Canvas, the page is scrolled to the top在 Html2Canvas 中渲染时，页面滚动到顶部
【发布时间】：2013-09-26 22:45:50
【问题描述】：

我正在使用 html2canvas 库，使用以下代码：

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

当onrendered 被触发时，页面会自动滚动到顶部。有没有我们可以保持滚动位置而不被自动带到页面顶部？

【问题讨论】：

在这里的演示页面上似乎发生了同样的事情：html2canvas.hertzen.com/examples.html 你能在调用 html2canvas 并将其设置回 onrendered 处理程序之前存储滚动顶部吗？

标签： javascript css canvas html2canvas

【解决方案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);
       }
    });
 });

【讨论】：

太棒了，我在发布赏金后也发现了这条线。只要我能奖励它，它就是你的了:)。感谢您的帮助。
很高兴能帮上忙。谢谢！ =)
完美！谢谢。

【解决方案2】：

你应该可以调整scrollY的位置，相对于当前pageYOffset，试试这个

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

【讨论】：