web-dev-qa-db-fra.com

Réagir Ne pas faire défiler

J'ai un composant de réaction simple, je règle l'événement onScroll à ce composant, mais lorsque je fais défiler l'écran ne déclenche pas 

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>
    )
  }
}
javascriptreactjsscroll
7
Wimal Weerawansa

Vous devez modifier la valeur de overflowY en auto ou scroll. À l'heure actuelle, vous n'obtenez pas de barre de défilement, car hidden force le navigateur à masquer la barre de défilement. 

3
nathan

Vous devez lier l'événement _handleScroll dans un constructeur. Essayez d'ajouter ceci à votre composant.

constructor() {
  this._handleScroll = this._handleScroll.bind(this);
}

https://facebook.github.io/react/docs/handling-events.html

2
grizzthedj

vous devez ajouter une référence à l'élément DOM:

React onScroll ne fonctionne pas

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);
    }
    /* .... */
}
1
Conan