Use #viewerContainer without position: absolute and overflow: auto

[hrst]

I'm currently testing pdf.js and stuck with the components examples such as the simpleviewer. These work great with the #viewerContainer div having position: absolute and overflow: auto.

I understand this makes a lot of sense for a setup such as the default viewer, however, I'd like to display PDFs by adding it (basically) to the main body, i.e. utilizing the main browser window scrollbar. When I remove position: absolute and overflow: auto, the viewer works but loads all pages at once (I'm assuming because it cannot correctly detect which pages are visible to the user anymore).

I also tried using the pageviewer.js example, which again works great but here I did not really find good examples on how to, after loading the first page, continue loading pages on demand when they are visible to the user (and unloading them afterwards), and so on, i.e. lots of functionality that is already perfectly implemented in the default viewer. I tried extracting the relevant parts (as I do not need 95% of the other stuff such as search, annotation, thumbnails, etc.), but this obviously got out of hand quickly and I felt as if was on the wrong path.

Is there any basic example on how to use pdf.js in a div without position: absolute and overflow: auto, and loading and unloading pages on demand as they are viewed by the user?

Any help is highly appreciated, I really tried to work with the examples and documentation but I'm stuck.

[burtonator]

I'm having the same issue... I still can't get it to auto-render on scroll and it just renders all the pages. even with overflow auto and position absolute.

[burtonator]

When using the rendering queue it doesn't render anything... even with overflow auto and position: 0

[burtonator]

If anyone has any suggestions where to start looking I'm going to try to fix this bug... It seems it only works with bot position AND overflow.

I think this has to do with BaseViewer and getVisiblePages....

[cjhewett]

After getting caught out by this position: absolute|relative requirement I would like to add that if the library requires it (and will silently fail to work correctly if not set) then it becomes more than just a presentation attribute to be found in the CSS and feels like it should either:

1. Be automatically set by the pdf_viewer on initialisation
2. Be checked and an exception thrown if the position value is is not set to an acceptable value (possibly when you first try to scroll programmatically)

[timvandermeij]

@ChrisHSandN Thanks to the PR above PDF.js now throws an exception if the position is incorrect.

[Theiaz]

Any update for this issue?

I'm embedding a pdf viewer within my <main/> element. Because of absolute positioning, the calculation of the height for my <main> element does not take the displayed pdf file into account. Therefore it is not possible to push my footer underneath the pdf respectively to the bottom of the page.

Is absolute really mandatory?

[nikolas]

I am thinking I'll have to embed pdf.js in an iframe instead of directly into my React app because of this issue. It would be nicer to not have to do that, but I'll see if the iframe route works...

[emri99]

@timvandermeij
The absolute requirement may be valid in some cases, however when implementing a custom solution without toolbar, this is unnecessary, produces BC break and force to use an overkill solution.

Could you consider replacing throwing exception by a warning or throwing an exception depending on an option, which can be defined to throw exception by default to ensure user is knowing the consequences ?