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

[siaikin]

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

It seems that there is no way to access the printing iframe. Can it be added to the parameters of the onBeforePrint callback?

[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

[siaikin]

How to solve this problem, don't understand

I modified the example of @ShallowGreen and customized the printing logic to synchronize the scrollTop of the element with id of needToScrollToBottom in the iframe with the same id element in the original document before printing.

https://codesandbox.io/s/react-to-print-forked-n4mxyj?file=/examples/ClassComponent/index.js:1777-1797

[vaynevayne]

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

[siaikin]

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

It works fine on my pc.

[vaynevayne]

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

[siaikin]

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

Similar to scrolling to the bottom, you can simply set the DOM element style to display the complete content. It depends on your use case.

This is a simple example: https://codesandbox.io/s/react-to-print-forked-n4mxyj?file=/examples/ClassComponent/index.js:1806-1937

[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!

[siaikin]

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!

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?

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