测试的浏览器有 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:
<!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?
待续。。。