Quiero poder usar la rueda de desplazamiento para cambiar valores en mi sitio en lugar de desplazarme. Más simplificado, quiero que el value suba en uno cuando me desplazo un paso hacia arriba con el mouse y baje en uno cuando me desplazo hacia abajo. ¿Cómo hago esto?
Usando state y ref puedes controlar ese desplazamiento y.
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') );Compruebe este bolígrafo: CodePen