Question

我知道这个问题已经得到了很多次的回答，但我的挑战是特殊的，因为我在这里尝试了所有的答案，但仍然没有运气。这是我的代码

export default class scrollLogic extends Component{
    constructor(props) {
        super(props);
        this.state={
            scroll:false
        };
        this.scrollDetector=this.scrollDetector.bind(this)
    }

    scrollDetector(ev) {
        console.log("Scrolling!");
    }
    componentDidMount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.addEventListener('scroll', this.scrollDetector);
    }
    componentWillUnmount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        list.removeEventListener('scroll', this.scrollDetector);
    }
render() {
        return (
            <div ref="list" className="header-holder"></div>
)
}
}

Answer 1

我想问题是你正在使用componentDidMount方法，该方法在组件渲染后调用。尝试使用componentWillMount而不是componentDidMount。

Answer 2

我意识到onScroll事件应该只用于本身有滚动条的容器，因此使用window.addEventListener('scroll', this.scrollDetector)代替了解决问题。因为它会监听窗口本身的滚动而不是div。

所以我将代码格式化为这样

export default class scrollLogic extends Component{
    constructor(props) {
        super(props);
        this.state={
            scroll:false
        };
        this.scrollDetector=this.scrollDetector.bind(this)
    }

    scrollDetector() {

        this.setState({
                scroll:true
        })
    }
    componentDidMount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        window.addEventListener('scroll', this.scrollDetector);
    }
    componentWillUnmount() {
        const list = ReactDOM.findDOMNode(this.refs.list)
        window.removeEventListener('scroll', this.scrollDetector);
    }
render() {
        return (
            (this.state.scroll)? <HeaderMin/>:<HeaderMax/>
)
}
}

我希望这有助于某人......

Reactjs onScroll事件没有响应

2 个答案: