scroll 事件究竟是发生在那个元素上的？

最新推荐文章于 2022-03-31 15:23:35 发布

TF16949

最新推荐文章于 2022-03-31 15:23:35 发布

阅读量181

点赞数

文章标签：操作系统

原文链接：http://www.cnblogs.com/www-wwr/p/9039202.html

版权

测试的浏览器有 1. chrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36
　　　　　　　 2. safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0.2 Safari/604.4.7

　　　　　　　 3. Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:59.0) Gecko/20100101 Firefox/59.0
代码如下：

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
</head>
<style>
.scroll-container {
width: 200px;
border: 10px solid blue;
height: 300px;
overflow: scroll;
}

.scroll-container>div {
height: 1000px;
background-color: burlywood;
}
</style>

<body>
<div class="scroll-container" id="scrollContainer">
<div id="scrollChild">
1 2 3
</div>
</div>
</body>
<script>
window.onload = function () {
document.getElementById('scrollChild').onscroll = function () {
console.log('scrollChild scroll?')
}
document.getElementById("scrollContainer").onscroll = function () {
console.log('scrollContainer scroll?')
}
}
</script>

</html>

结果都是在控制台打印出 scrollContainer scroll?

why? 为什么事件的监听需要在外侧包裹元素（父元素）上？并且scrollTop等值在child Element 上面都是零，在父元素上才是有值的～

在MDN文档上面

并没有特别说明需要在父元素监听scroll事件，说明理应打印的是scrollChild scroll?

待续。。。

转载于:https://www.cnblogs.com/www-wwr/p/9039202.html

TF16949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll 事件究竟是发生在那个元素上的？

测试的浏览器有 1. chrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36　　　　　　　 2. safari: Mozilla/5.0 (Macintosh; Intel Mac ...
复制链接

扫一扫