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 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?
待续。。。
posted @ 2018-05-15 09:18  wwr-ready  阅读(243)  评论(0)  编辑  收藏  举报