How to access Scroller of PdfViewer?

1 Answer 25 Views
PDFViewer
Christine
Top achievements
Rank 2
Iron
Christine asked on 27 Jul 2022, 10:46 AM

Hello

is it possible to access the scroller of a PdfViewer and bind to its event?

I see an embedded km-scroll-container, but cannot find out, how to control it, similar to that:

Automatic km-scroll-container events in Kendo UI for jQuery | Telerik Forums

 

I want to be able to zoom to the center of a pdf page instead of the top left corner and would therefore calculate the translation at the resize-event and set the offset then.

Or is there an other solution for that problem?

Thanks

Christine

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 01 Aug 2022, 08:21 AM

Hello Christine,

You can get a reference to the built-in scroller in PDFViewer and use its methods as demosntrated below:

pdfViewer._scroller.scrollTo(0, -500);

Here is a Dojo where the above is demonstrated.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Christine
Top achievements
Rank 2
Iron
commented on 04 Aug 2022, 01:16 PM

Hello Neli

thanks for your answer.

I can confirm that I can access the scroller in that way. But: I have a problem with the vertical scroll position for documents with a higher number of pages.

I added the following to the Dojo:

pdfViewer._scroller.bind("scroll", onChangeScroll_Pdf);

function onChangeScroll_Pdf(e) {
        console.log("--- onChangeScroll_Pdf: " + e.scrollLeft + "/" + e.scrollTop);
  }

 

If I use your sample document, the values for scrollTop seem fine - if I go to the last page, change the zoom, pan it, move to the bottom of the last page (by wheel), zoom again and so on. Everything is fine.

The values for scrollTop at the bottom position are: 1470 / 2754 / 4038 / 9174 for the zoom scales of 100% / 150% / 200% / 400%. 

Than I loaded one of my documents with 58 pages and do the same procedure: go to the last page and note the values for scrollTop.

Now I get: 64816 / 66079 / 67342 / 72393 for the same zoom scales of 100% / 150% / 200% / 400%. 

 

Same effect with a document with 34 pages.

Values here: 36803 / 38418 / 39681 / 44733

 

You can reproduce it that way:

Add the output and watch it in the console.

- load a document with 30 or 50 pages

- page through it (page by page) -> everything fine

- jump to the beginning

- jump to the end

- change the zoom

- jump to the end <- this value is wrong

- if you jump to the beginning and page through it again, it is ok again

 

As I use the values of e.scrollTop to find my last position, I am not sure how I can solve my problem, it that value is not reliable...

 

Regards,

Christine

 

                
Neli
Telerik team
commented on 09 Aug 2022, 10:36 AM

Hi Christine,

I am not sure I understand the issue correctly. What behavior are you trying to achieve when you scroll to the bottom the PDF file? I followed the described steps and you can see the behavior on my side in the screencast linked here. However, even after I followed the steps from your email, jumped to the end, zoom in and zoom out, when the PDF file is at its bottom the scrollTop value is always around 50000 on my side, but it is not 60k or 70k. Here is the Dojo I used in the screencast. Please let me know if I am missing something. 

Regards,

Neli

Christine
Top achievements
Rank 2
Iron
commented on 09 Aug 2022, 10:50 AM

Hi Neli

at the end of your screencast, jump to the first page and page then to the last - page by page. Have a look at the scrollTop value then. It is much higher then 50000 for higher zoom values.

Regards

Christine

Neli
Telerik team
commented on 12 Aug 2022, 08:18 AM

Hi Christine,

I will need some additional time to review the issue and the provided steps. I will get back to you with more infromation once I have something to share.

Thank you very much for your patience.

Regards,

Neli

Tags
PDFViewer
Asked by
Christine
Top achievements
Rank 2
Iron
Answers by
Neli
Telerik team
Share this question
or