Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React onScroll not firing

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>
    )
  }
}
like image 201
Wimal Weerawansa Avatar asked Feb 17 '17 14:02

Wimal Weerawansa


People also ask

How do I add a scroll event in React?

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.

How does onScroll work?

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.


1 Answers

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.

like image 95
nathan Avatar answered Sep 19 '22 04:09

nathan