React onScroll not firing

Question

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>
    )
  }
}

maybe this helps: stackoverflow.com/questions/29725828/…

el solo lobo
– el solo lobo

2017-02-17 14:53:05 +00:00
Commented Feb 17, 2017 at 14:53 — el solo lobo
– el solo lobo, Commented Feb 17, 2017 at 14:53

nathan · Accepted Answer · 2017-02-18 13:06:04Z

23

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.

answered Feb 18, 2017 at 13:06

nathan

4,7726 gold badges35 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

que1326 Over a year ago

general solution for this bug, thank you sir, I had overflow: hidden on the <html>

raphael-allard Over a year ago

Thanks Nathan for your answer! Notice: you also need to fix an height to trigger the event

Community · Accepted Answer · 2017-05-23 12:09:23Z

2

you need to add a ref to the DOM element:

React onScroll not working

class ScrollingApp extends React.Component {

    _handleScroll(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.addEventListener('scroll', this._handleScroll);
    }
    componentWillUnmount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.removeEventListener('scroll', this._handleScroll);
    }
    /* .... */
}

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 17, 2017 at 15:22

Conan

6927 silver badges12 bronze badges

Collectives™ on Stack Overflow

React onScroll not firing

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related