html监听scoll无效,ReactJS - 监听Html组件的滚动事件

背景

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

解决方案

经过查找测试，发现ReactJS中，对Div监听只需要绑定 onScrollCapture事件。

如下代码片段：

• this._container = c}

style={{

flex: 1,

height: '100%',

flexDirection: 'column',

overflowY: 'scroll',

overflowX: 'hidden',

padding: 0,

margin: 0,

listStyle: 'none',

}}

onScrollCapture={() => this._onScrollEvent()}>

那么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 这样的方法的。