背景
最近在使用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 这样的方法的。
