ReactJS - 监听Html组件的滚动事件

背景

最近在使用Electron + ReactJS编写一款跨平台的PC程序，需要对Div进行滚动监听，经过多番查找，网上只找到相关JS监听window, body等的滚动的监听，并没有对ReactJS的元素滚动提及到。

解决方案

经过查找测试，发现ReactJS中，对Div监听只需要绑定 onScrollCapture事件。
如下代码片段：

<ul ref={c => this._container = c}
                    style={{
                        flex: 1,
                        height: '100%',
                        flexDirection: 'column',
                        overflowY: 'scroll',
                        overflowX: 'hidden',
                        padding: 0,
                        margin: 0,
                        listStyle: 'none',
                    }}
                    onScrollCapture={() => this._onScrollEvent()}>
</ul>

那么onScrollEvent方法应该这样实现：

• Component子类构造函数

constructor(props){
       super(props);
       this._onScrollEvent = this._onScrollEvent.bind(this);  //保证被组件调用时，对象的唯一性
}

• this._onScrollEvent实现

 /**
     * 滚动事务
     * @private
     */
    _onScrollEvent() {
        if (this._container.scrollTop + this._container.clientHeight === this._container.scrollHeight) {
                ///todo: do something
        }
    }

结束

大致就是这样的，希望对你们有帮助。当然 this._container 是支持scrollTo, scrollBy 这样的方法的。