[Edit]

React - onWheel example

1 contributors

2 contributions

0 discussions

1 points

Created by:

Jun-L

963

In this article, we would like to show you onWheel event in React.

In the example below, we create <div> element with a scrollbar. As we scroll the list inside the div with a mouse wheel, onWheel triggers handleOnWheel method which displays that list is being scrolled.

Runnable example:

xxxxxxxxxx
 
// 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 handleOnWheel = () => {
  console.log('onWheel: scrolling the list...');
};
​
const App = () => {
  return (
    <div style={{ height: '100px' }}>
      <div style={appStyle} onWheel={handleOnWheel}>
        <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 );