I have simple react component, I set onScroll event to that component but when I scroll it's not firing
import React, { Component, PropTypes } from 'react'
export default class MyComponent extends Component {
_handleScroll(e) {
console.log('scrolling')
}
render() {
const style = {
width: '100px',
height: '100px',
overflowY: 'hidden'
}
const innerDiv = {
height: '300px',
width: '100px',
background: '#efefef'
}
return (
<div style={style} onScroll={this._handleScroll}>
<div style={innerDiv}/>
</div>
)
}
}
To add scroll event listeners in a React component, we can set the onScroll prop of an element to an event handler function. We create the onScroll function that logs the scroll event object. Then we assign the onScroll function as the value of the onScroll prop of the div.
Definition and Usage. The onscroll event occurs when an element's scrollbar is being scrolled. Tip: use the CSS overflow style property to create a scrollbar for an element.
You need to change the value of overflowY
to auto
or scroll
. Right now you're not getting a scrollbar because hidden
causes the browser to hide the scrollbar.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With