How to use scroll wheel as input on react?

Question

I want to be able to use the scroll wheel for changing values on my site instead of scrolling. More simplified I want value to go up by one when I scroll up one step on the mouse and go down by one when scrolling down. How do I do this?

Answer 1

Using state and ref you can control that y displacement.

class ScrollAwareDiv extends React.Component {   constructor(props) {
    super(props)
        this.myRef = React.createRef()
        this.state = {scrollTop: 0}   
    }

    onScroll = () => {
         const scrollY = window.scrollY
         const scrollTop = this.myRef.current.scrollTop
         console.log(`onScroll, window.scrollY: ${scrollY} myRef.scrollTop: ${scrollTop}`)
         this.setState({
               scrollTop: scrollTop
          })   
    }

  render() {
    const {
      scrollTop
    } = this.state
    return (
      <div
        ref={this.myRef}
        onScroll={this.onScroll}
        style={{
          border: '1px solid black',
          width: '600px',
          height: '100px',
          overflow: 'scroll',
        }} >
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
      </div>
    )   } }

ReactDOM.render(   <ScrollAwareDiv />,   document.getElementById('root') );

Check this pen: CodePen