How Do I Trigger an event when a user scrolls to the end of the pdf viewer in MVC

[Tristan]

I'm looking to implement a check when a user has scrolled to the bottom of the pdfviewer using dotnet mvc/jquery.

Iv found the following articles 

https://docs.telerik.com/devtools/wpf/knowledge-base/kb-pdfviewer-scroll-to-last-page

https://www.telerik.com/forums/how-to-access-scroller-of-pdfviewer

 

and iv managed to hook into the scroll functionality through a private scroller field like so

still figuring out the calculation...

<script>
      function onPdfViewerComplete(e){
        debugger;
        try {
                const scroller = e.sender._scroller;
                const scrollPosition = scroller.scrollTop;
                const maxScrollPosition = scroller.scrollHeight - scroller.clientHeight;

            scroller.bind('scroll', ()=> {
                if (scrollPosition >= maxScrollPosition) {
                    alert("Scrolled to the bottom of the PDF");
                }
            });
        } catch(e) {
            console.error("error", e);
        }
    }
</script>

Is there any better way to handle this? the documentation seems sparse around this.

[Mihaela]

Hello Tristan,

Another option is to handle the Render event, access the total number of pages, and check when the last page is reached.

For example:

    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf.File(Url.Content("~/shared/web/pdfViewer/sample.pdf")))
        .Height(700)
        .Events(events => events.Render("onRender"))
    )

<script>
  function onRender(e) {
          var totalPages = e.sender.pages; // access the total number of pages. They are "undefined" during the initial triggering of the Render event
          if(totalPages != undefined) {
            if(e.page.pageNumber == totalPages.length) {
              console.log("scrolled to the last page");
            }
          }
  }
</script>

Regards,
Mihaela
Progress Telerik

[Tristan]

Thanks so much @Mihaela 

I have implemented a similar solution and it works wonderfully 

          @(Html.Kendo().PDFViewer()
              .Name("pdfviewer")
              .PdfjsProcessing(pdf => pdf.File(Url.Content("~/Documents/End User Licence and Services Agreement LEXTECH.pdf")))
              .Events(ev => ev.Render("onPdfViewerRendered"))
              )


<script>
        function onPdfViewerRendered(e){

            const scroller = e.sender._scroller;
            e.sender.toolbar.zoom.combobox.value("fitToWidth");
            e.sender.toolbar.zoom.combobox.trigger("change");

            const scrollHandler = () => {
                const noOfPages = e.sender.document.pages.length;
                const currentPage = e.sender._pageNum;

                if (currentPage >= noOfPages) {
                   console.log("reached last page")

                    scroller.unbind('scroll', scrollHandler);
                }
            };

            scroller.bind('scroll', scrollHandler);
        }

</script>