Andrew Davey Andrew Davey - 2 months ago 7
CSS Question

Printing Scrolled Divs

I have a web page that displays a long line graph inside a div with overflow-x: scroll.
This works well as a web page allowing the use to scroll back and forward through the graph.

However, when printing the page the scroll position is reset to zero.
Is there a way to overcome this?

Answer

You can't do this in plain CSS -- you will have to reimplement the scrolling using your Javascript UI library of choice to get what you want.

The user state of the scrollbar isn't used when printing (think about it, if you're scrolled 3 screens down a page and hit "print" does it make sense for the browser to only print the part of the document that's in your window at the time?). However, if you use JS, which actually manipulates the DOM (i.e. sets the x-position offset to -293 if the person has scrolled right 293 pixels, just like style="left: -293px; overflow: hidden;" in CSS), then it will show up as such in printed documents.

My suggestion is, unless the graphs are very wide, just skip all of this nonsense and use a printer stylesheet with width: 100% for the graph's <div> so the graph just shrinks to page width.