In Vaadin 14 how do I force the scrollbar on a ListBox to move to the top when new items are loaded

103 views Asked by At

I am using Vaadin 14 and have implemented paging for a ListBox that uses a forward button to load the next n items and a back button that to load the previous n items. The problem I have is that if I scroll to some position in the ListBox and then click either the forward or back button to load the new items (using setItems), the scrollbar will not return to the top of the ListBox (i.e., it remains at its previous position). How do I force the scrollbar to move to the top of a ListBox when I load new items?

The obvious way to move the scrollbar to the top of a ListBox is to execute the something like the following when either button is clicked:

// Scroll to the top of listBox

listBox.getElement().executeJs("this.scrollTop = 0");

I have tried the above and a number of similar approaches but none work. Perhaps the component that actually scrolls is not the listBox but some container component.

SOLUTION FOUND!

Although I could never determine what element was actually responsible for scrolling, I could find the elements being scrolled. So all I needed was the following:

listBox.getElement().getChild(0).executeJs("this.scrollIntoView()");

0

There are 0 answers