React-pdf: How can I add a scrollbar?

[bfang711]

I would like to fix the showing area width, and in the meantime, can scroll the pdf page if it is beyond the area width.

The way I use it now is <Document> <Page width={a fixed number} scale={a changeable number}/> </Document>. But I don't think this is the right way. plus if fix the width in Page, I cannot zoom in/out by changing the scale.

Can you please advise?

thank you.

[wojtekmaj]

Hi,
adding a scrollbar is up to you. Treat <Page> like you would treat <img> - there's no special functionality that allows a scrollbar in an image, and there is no such functionality in <Page> either. You need to wrap it in your own wrapper and style this wrapper in a way that would show the scrollbar.

I don't know if I understood correctly what you were trying to achieve, though.

[chinalwb]

@bfang711 , did you find a solution to add scrollbars? Is it possible to add the feature which enables drag on PDF to show the beyond area content? Which I think will provide a better user experience.

[ianzen]

@bfang711 , did you find a solution to add scrollbars? Is it possible to add the feature which enables drag on PDF to show the beyond area content? Which I think will provide a better user experience.

@chinalwb You can wrap the Document/Page element in a div with a specified height and style={{overflow: "scroll"}}. If the pdf element overflows this div then a scrollbar will be added. I'm currently using this approach to enable scrolling in my project with scrollbars set to hidden. Rendering multiple pages for large pdfs and getting it to interact well with scrolling is non-trivial. See https://github.com/wojtekmaj/react-pdf/issues/94

[chinalwb]

@ianzen Thanks for your comment. I tried per your advice and I do see the scroll bar (I see vertical scroll bar but don't see the scroll bar in horizontal, though it can scroll in both directions). However the issue is the document cannot be fully displayed. For example, I have a 400% zoom in, I cannot see the document upper content even with the scroll bar at top.

Here is a screenshot:

125%

400%

My Code:

<div className="ril-image-current ril__image" style={{ overflow: 'scroll' }}>
        <Document
          className="lightbox-pdf"
          file={file}
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} scale={ZOOMS[zoomIndex]} />
        </Document>
      </div>

Any advice?

Thanks.

[wojtekmaj]

Your JSX looks fine, the answer in your case would be in CSS. Perhaps your Page is cut off by overflow: hidden somewhere, or there's a negative margin, or there's transform. Hard to tell without actually looking at it IRL.

[chinalwb]

Your JSX looks fine, the answer in your case would be in CSS. Perhaps your Page is cut off by overflow: hidden somewhere, or there's a negative margin, or there's transform. Hard to tell without actually looking at it IRL.

Thanks for your advice, I'll check.

[chinalwb]

Just an update for my issue. I need to add transform: translate(0px, 50px) and overflow: scroll to the <div> under the toolbar. Thanks again @wojtekmaj for the advice and the wonderful pdf render component!

[Daryaei]

whay my react pdf hasn't toolbar?

[RazaAkmal11]

@chinalwb Can You please tell me How You have managed to zoom in zoom out in Your pdf??