EN
React - onScroll example
0
points
In this article, we would like to show you onScroll
event in React.
In the example below, we create <div>
element with a scrollbar. As we scroll the list inside the div onScroll
triggers handleScroll
method which displays that list is being scrolled.
Runnable example:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
const appStyle = {
width: '100px',
height: '100px',
overflow: 'scroll',
};
const handleScroll = () => {
console.log('scrolling the list...');
};
const App = () => {
return (
<div style={{ height: '100px' }}>
<div style={appStyle} onScroll={handleScroll}>
<ul>
<li>List_item_1</li>
<li>List_item_2</li>
<li>List_item_3</li>
<li>List_item_4</li>
<li>List_item_5</li>
</ul>
</div>
</div>
);
};
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );
Note:
As React documentation says: starting from React 17 theonScroll
event does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.