Scroll Events in ListBox
There are multiple ways to scroll the item list in the ListBox component. You can scroll the list using the scroll bar, the mouse wheel, using touch or manually scroll to item from code. Whenever list is scrolled, the scrollPosChanged event is fired.
The sample code below that shows how to handle scroll events in ListBox, is available in each JavaScript framework: Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows infinite scrolling, where scrolling to the list end loads more data into the ListBox.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Handle Scroll Events
When scroll position changes in the ListBox component, the scrollPosChanged event will fire. You can handle this event in your code and add specific actions, like loading new data into the list when reaching the end.
This event carries the following data:
- value - an object that holds the current scroll position
- max - an object that holds the maximum scroll position
In this example, using the max position you can determine when the list end is reached. When that happens, you can add more data into the list, manually adding items in code or loading new data from the server.
A more detailed information is available here: How to Implement Infinite Scrolling in ListBox.
Conclusion
Whenever the item list is scrolled in the ListBox component, the scrollPosChanged event will fire. This allows you to add specific actions in your code, like loading more data into the list when you scroll to the end position.
IntegralUI Web is an UI library of native web components that includes the ListBox. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.