React - onScroll example

0 points
Created by:

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}>

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

As React documentation says: starting from React 17 the onScroll 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.

Related posts

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂