How to display 1 page in the viewport even for a pdf with 10 pages

[FadilCivils]

Hi all,

Love the speed of rendering PDFs with this library, however I am stuck a bit with one functionality, I need to only render 1 page in the center of a div container, rather than having like a vertical scrollable pdf, I want to show only 1 page and when i click the thumbnail it will load the chosen page number, i manage to do the thumbnail part but right now the problem is that i see the viewport still shows all the pdf but only renders 1 with gaps on top and below the chosen page. But what I want is just to have that 1 page in the view not hidding the other pages and creating some space on top or below the selected page. Is that possible?

It would be something like clean flip-book/carousel feel

Thank you

[cookesan]

If you are using Scroller, the gaps are expected. Scroller is still laying out the whole document as a virtual scroll area; changing the current page or rendering only one page does not remove the total document spacing.

For a carousel/flip-book style view, I would not use Scroller for the main page area. Keep your own selected page state from the thumbnail click, then render only that page's layers, for example the same RenderLayer/selection/search layers you use inside renderPage, but with the selected pageIndex.

Use the scroll plugin's scrollToPage path when you want a full-document scroll layout. For "exactly one page centered in this div", model it as a single selected page view instead of a scrolled document.

[FadilCivils]

Thanks @cookesan, the solution worked for my use case.