not working when exist overflow: scroll div

[ShallowGreen]

this is my test: https://codesandbox.io/s/react-to-print-forked-vkg1oc?file=/examples/ComponentToPrint/index.js

In the top of the print content, I added a scroll div, try to scroll bottom and click print

this page always show the "top" text

[sekikyo]

same problem

[MatthewHerbst]

Hey, thanks for reporting this. Yeah, have been aware of it for a long time, I'm not sure of an easy fix. We'd have to do something like this: https://stackoverflow.com/questions/34532331/finding-all-elements-with-a-scroll and then scroll all of those elements

Related: https://stackoverflow.com/questions/2481350/how-can-i-get-the-scrollbar-position-with-javascript

[ShallowGreen]

Hey, thanks for reporting this. Yeah, have been aware of it for a long time, I'm not sure of an easy fix. We'd have to do something like this: https://stackoverflow.com/questions/34532331/finding-all-elements-with-a-scroll and then scroll all of those elements

Related: https://stackoverflow.com/questions/2481350/how-can-i-get-the-scrollbar-position-with-javascript

Is there a temporary method that can solved this problem, I use srollTop like parentDom.scrollTop = scrollPosition; before print, it's not working :(

[MatthewHerbst]

Is there a temporary method that can solved this problem, I use srollTop like parentDom.scrollTop = scrollPosition; before print, it's not working :(

Hmm. If you know exactly what divs needs scrolling you could manually do the above inside the onBeforeGetContent prop we provide

[MatthewHerbst]

It seems that there is no way to access the printing iframe

You can access this by passing your own print prop

[vaynevayne]

How to solve this problem, don't understand

[vaynevayne]

which button ? Can you remove useless elements? Simplify the demo

[vaynevayne]

Oh oh, what I want is not this function, what I want is to be able to print everything in the container

[MatthewHerbst]

Really cool to see, thanks for the example @siaikin. If you're up for it, would be happy to put the above example and/or a link to this thread in the README. Happy to let you make the PR if you want!

[MatthewHerbst]

hi @MatthewHerbst Thank you very much.

The example is rudimentary, so I need to improve it a bit. I will submit the PR this weekend.

Should I put the example explanation for the scrolling container and this thread at the end of the FAQ or somewhere else?

Awesome, thanks! Maybe after the "Page Breaks" section, a new sub-section called "Handling Scrolling"? Could show a code example and link to this (and any other relevant) issues

[vaynevayne]

thanks @siaikin , This is the core code

 const print = async (iframe) => {
    const printContent = iframe.contentWindow.document;
    const printScrollElement = printContent.getElementById(
      "needToScrollToBottom"
    );

    printScrollElement.style.overflow = "visible";
    printScrollElement.style.height = "max-content";

    iframe.contentWindow.print();
  return Promise.resolve()
  };