Angular : Scroll to a specific position

Technical Support
1

Product: WebViewer

Product Version: 8.6.0

I created my own table of content by retrieving bookmarks with documentViewer.getDocument().getBookmarks();

with that each node of my table of content has the page and the vertical position where the associted text section start.

My problem is that I can scroll to a page with this.documentViewer.setCurrentPage($event.node.origin.page,true); but I didn’t find a way to scroll to a specfic position to have the start of a section at the top of the webviewer which is the default behaviour of the table of content in the left panel (that i can’t use).

is there a function to scroll to a specific position ?
if not, is there way to achieve that ?

2

Hi rodolphebansard,

We don’t have an official API to trigger a smooth scroll to any position in the document, but the code below may be able to unblock you. I have added this feature request to our backlog to be worked on in the future.

You can try using the DocumentViewer.getScrollViewElement() API followed by scrollViewElement.scroll() to trigger a smooth scroll. See sample below:

const documentViewer = instance.Core.documentViewer;
const scrollViewElement = documentViewer.getScrollViewElement();
scrollViewElement.scroll({
  left: null, // Can set to null since we only care about vertical scrolling.
  top: 3000,
  behavior: 'smooth'
});

The downside is these coordinates are just DOM/browser coordinates - they are not related to the document page - so there will be some conversion required when specifying top or left.

Let me know how this works for you!

Adam

3

Hi, it works for me but it’s a bit hacky !
Here’s what i came up with :

Without smooth scrolling

this.scrollViewElement = documentViewer.getScrollViewElement();
this.documentViewer.setCurrentPage(pageNumber,false);
const pageScroll = this.scrollViewElement.scrollTop;
const zoomLevel = this.documentViewer.getZoomLevel();
const sectionScroll = bookmark.getVerticalPosition();
this.scrollViewElement.scroll({
      top: pageScroll + sectionScroll * zoomLevel,
});

With smooth scrolling

this.scrollViewElement = documentViewer.getScrollViewElement();
const currentScroll = this.scrollViewElement.scrollTop;
this.documentViewer.setCurrentPage(pageNumber,false);
const pageScroll = this.scrollViewElement.scrollTop;
const zoomLevel = this.documentViewer.getZoomLevel();
const sectionScroll = bookmark.getVerticalPosition() as number;
this.scrollViewElement.scroll({
      top: currentScroll,
});
this.scrollViewElement.scroll({
      top: pageScroll + sectionScroll * zoomLevel,
      behavior:'smooth',
});

for both I need to scroll to the to the page of the section and then scroll to the section.
For the smooth scrolling i need to scroll back to the startpoint before scrolling to the section.
I used the zoom level for the conversion.

I didn’t find a cleaner way for now but I am open to your suggestions.

4

Hi @rodolphebansard,

Thanks for sharing your snippet. It’s interesting you scroll to top of page and then scroll to section within page. I tested the snippet I provided you on our demo page and was able to scroll to any page/section, assuming you know how to calculate the top property.

Can you explain why you first scroll to top of page?

Adam

5

Hello

I did not find a way to get the vertical position of the section.
bookmark.getVerticalPosition() return the position of a section in a page.
bookmark.getVPos() does not return anything to me.

If I use the following code to test getVPos() it stop the code at the console.log without any error

// Change to the second page when a document loads
    this.documentViewer.addEventListener('documentLoaded', () => {

      const bookmarks = this.documentViewer.getDocument().getBookmarks();

      void bookmarks.then(bookmarks => {
        console.log(bookmarks[0].getVPos());
        this.tableOfContent$.next(this.getTableOfContent(bookmarks));
      });
    });

So to respond to your question: I didn’t find a way to get the top property so i scroll to the top of the page to get the top property.