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.

Scroll Events in ListBox for React Angular Vue
Load Sample
ListBox component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at

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.

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.


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.