一开始，想着在 window / document 上绑定scroll事件，发现不起作用。
原因分析
- 需要明白当前滚动的事件的是发生于哪个页面
- 只有当父元素不够显示当前内容时浏览器才会发生滚动
- 页面的滚动事件可能位于wrapper的父级身上，监听window也就不会触发事件
根据MDN对scroll事件的描述：
冒泡: element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡
当元素外面的scroll滚动时， 可能造成element位置移动
onScrollEvent = () => {
// do something when scroll
}
bindScrollEvent = (ref) => {
if (this.scrollNode.length) return
let node = ref
while (node.parentElement) {
node = node.parentElement
node.addEventListener("scroll", this.onScrollEvent);
this.scrollNode.push(node)
}
}
unbindScrollEvent = () => {
for (const node of this.scrollNode) {
node.removeEventListener("scroll", this.onScrollEvent);
}
this.scrollNode = []
}
// 绑定scroll事件
this.bindScrollEvent(this.demoRef.current)
// 移除scroll事件
this.unbindScrollEvent ()
