Skip to content

Commit 977b034

Browse files
authored
Add content related to scroll control in the README (MatthewHerbst#633)
Add content related to scroll control in the README
1 parent de4c04b commit 977b034

File tree

1 file changed

+54
-0
lines changed

1 file changed

+54
-0
lines changed

README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,60 @@ If your content rendered as print media does not automatically break multi-page
463463
- A style of `position: absolute`, when rendered to print, may result in reformatted, rotated, or re-scaled content, causing unintended affects to print page layout and page breaks
464464
- Using `flex` may interfere with page breaks, try using `display: block`
465465

466+
### Handling Scrolling ([603](https://github.com/gregnb/react-to-print/issues/603))
467+
468+
[![Edit react-to-print (Handling Scrolling)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-to-print-handling-scrolling-n4mxyj?fontsize=14&hidenavigation=1&theme=dark)
469+
470+
If you need to print the content of a scrolling container, you may encounter the following issues:
471+
472+
- [Unable to control the scroll position](https://github.com/gregnb/react-to-print/issues/603#issue-1647664811), so the printed content may not be what you want.
473+
- [Overflow content is truncated](https://github.com/gregnb/react-to-print/issues/603#issuecomment-1649604330), resulting in missing printed content.
474+
475+
To solve these problems, you need to modify the properties of the scrolling container when printing. You can pass a function to the `print` property, which will be called when printing. In this function, you can use the DOM API to query the scrolling container that needs to be modified, and then modify its properties to **control the scroll position**.
476+
477+
```javascript
478+
const customToPrint = (printWindow) => {
479+
const printContent = printWindow.contentDocument || printWindow.contentWindow?.document;
480+
const printedScrollContainer = printContent.querySelector('.scroll-container');
481+
482+
const originScrollContainer = document.querySelector('.scroll-container');
483+
484+
// Set the scroll position of the printed container to match the origin container
485+
printedScrollContainer.scrollTop = originScrollContainer.scrollTop;
486+
487+
// You can also set the `overflow` and `height` properties of the printed container to show all content.
488+
// printedScrollContainer.style.overflow = "visible";
489+
// printedScrollContainer.style.height = "fit-content";
490+
491+
printWindow.contentWindow.print();
492+
}
493+
494+
const handlePrint = useReactToPrint({
495+
// ...
496+
print: customToPrint,
497+
});
498+
```
499+
500+
#### Simple Show All Content
501+
502+
In addition to the methods in the above example, you can also simply add a CSS class name to the scrolling container when printing to **show all content**.
503+
504+
Set the container to `overflow: visible; height: fit-content` when printing, cancel the scrolling behavior when the content overflows, and make the height adapt to the content.
505+
506+
```css
507+
@media print {
508+
.scroll-container {
509+
overflow: visible;
510+
height: fit-content;
511+
}
512+
}
513+
```
514+
515+
> Note:
516+
>
517+
> - If the styles do not take effect, you can try using the `!important` modifier.
518+
> - The styles provided in the above instructions are for reference only. Complex situations may require more styles to achieve the desired result.
519+
466520
## Running locally
467521
468522
*NOTE*: Node >=12 is required to build the library locally. We use Node ^14 for our tests.

0 commit comments

Comments
 (0)