How to display 1 page in the viewport even for a pdf with 10 pages #604
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
All reactions
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 inst...
Replies: 1 comment 1 reply
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.
All reactions
Thanks @cookesan, the solution worked for my use case.
All reactions
-
❤️ 1