CODEWITHSUNDEEP
javascriptcsscanvashtml2canvas
igolka97
igolka97

Reputation: 298

On render in Html2Canvas, the page is scrolled to the top

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?

Upvotes: 11

Views: 10680

Answers (2)

riegersn
riegersn

Reputation: 2849

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

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

Upvotes: 1

SVSchmidt
SVSchmidt

Reputation: 6567

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

Upvotes: 23

Related Questions