11

I am using the html2canvas library, using the following code:

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

When onrendered is fired, the page is automatically scrolled to the top. Is there anyway we can maintain our scroll position and not be automatically taken to the top of the page?

Mathew Thompson
  • 55,877
  • 15
  • 127
  • 148
igolka97
  • 288
  • 2
  • 11
  • looks like the same thing happens on the demo page here: http://html2canvas.hertzen.com/examples.html are you able to store the scrolltop before calling html2canvas and setting it back in the onrendered handler? – mothmonsterman Jul 29 '14 at 21:00

2 Answers2

23

I took a look into the html2canvas.js and saw the following line:

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

After commenting window.scroll(0,0) out, it worked fine for me on my local testing. Seems like that behaviour was intended by the author.

Of course you could also save your current scroll position into a variable when firing the code. The way you may do it depends on how you execute html2canvas. If it's a button like on the demo page, you would add an event listener to that button:

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);
       }
    });
 });
SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
1

You should be able to adjust the scrollY position, relative to the current pageYOffset, try this

html2canvas(document.body, { scrollY: (window.pageYOffset * -1) })
riegersn
  • 2,819
  • 3
  • 17
  • 19