问题描述
有个项目中，需要监听子组件中是否滑动，最初想到了window全局监听，却发现根本监听不到。后想到onScrollApi，这次记录一下在onScrollApi中踩过的坑。
样例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div>
<div onScroll="onScrollCB()" class="scrollDiv">
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
<img src="https://img0.baidu.com/it/u=554275960,1123388892&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" />
</div>
你好 你好 你好
</div>
<script>
window.addEventListener("scroll", () => {
console.log("全局滑动");
});
function onScrollCB() {
console.log("div内滑动");
}
</script>
|
如果上面那样写，其实永远无法打印div内滑动，因为滑动事件并没有发生在所监听的div中，只有滑动发生在所监听的div中onScroll才会被触发。
解决
解决方法其实很简单，给需要监听的div添加一个高度限制，并允许滑动。就能让滑动发生在div内。
1
2
3
4
| .scrollDiv {
height: 400px;
overflow: auto;
}
|
需要注意的是，div内内容的高度必须高于或宽度宽于div所限制的高度或宽度，才能让div滑动起来。
感谢观看，如果对你有帮助可以关注本站，龙小亦在此谢过了
