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