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

╰+攻爆jí腚メ 2022-05-23 02:05 95阅读 0赞

测试的浏览器有 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文档上面

![1167719-20180515091610971-672260617.png][]  
并没有特别说明需要在父元素监听scroll事件，说明理应打印的是scrollChild scroll?

待续。。。

[1167719-20180515091610971-672260617.png]: /images/20220523/ce44a50b9fc9423f88d477404a4ce97c.png