How to display single pages in book mode?

Hi Stephan,

I’m trying to build a mobile PDF viewer. I need to display only one page at the same time. pageViewMode="book" always shows 2 pages at the same time. When I use [scrollMode]="1", there isn’t this paging feeling.

What’s the right way to only display one page at the same time and allow paging?

Regards, Marius

[mariusbolik]

Got it, using only CSS. Thank you for the hints @stephanrauh!

 #viewerContainer {
   scroll-snap-points-x: repeat(100vw);
   scroll-snap-type: x mandatory;
   scroll-snap-stop: always;
   scroll-behavior: smooth;
   scrollbar-color: transparent transparent;
   -webkit-overflow-scrolling: touch;

   .page {
     scroll-snap-align: start;
   }
 }

[stephanrauh]

Thanks for keeping me up-to-date! I need to keep your hints in mind, because I’d like to add a demo using your ideas to the showcase. Too bad the list of nice ideas is piling up faster than I can solve them at the moment. I guess it’ll take a while.

BTW, this article seems to be a comprehensive wrap-up of CSS scroll snapping: https://css-tricks.com/practical-css-scroll-snapping/