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

╰+攻爆jí腚メ 2022-05-23 02:05 144阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关元素滚动scroll

元素滚动 scroll 元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等

末蓝、/ 2024年03月17日 23:45/ 0 赞/ 104 阅读

相关 div上添加scroll监听事件失败的原因

1，问题：在给div添加scroll监听事件时，发现添加失败，即在添加的方法中没有执行要添加方法，如下 document.querySelector('.appMai

╰+攻爆jí腚メ/ 2023年07月01日 10:53/ 0 赞/ 27 阅读

相关 uni-app scroll-view 区域内上拉事件

<scroll-view scroll-y="true" @scrolltolower="scroll"> </scroll-view> meth

约定不等于承诺〃/ 2022年12月27日 08:36/ 0 赞/ 87 阅读

相关 Mac上的Java究竟在哪儿

http://www.voidcn.com/blog/zkq1989/article/p-2127581.html 习惯了在Windows下开发的朋友，初次在Mac下进

超、凢脫俗/ 2022年07月14日 02:15/ 0 赞/ 260 阅读

相关 js滚动事件scroll家族

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月13日 23:27/ 0 赞/ 240 阅读

相关 jquery 的on方法获取发生事件的元素对象

jquery 的on方法获取发生事件的元素对象方法一：一个元素绑定事件的时候方式一：使用$(this)获取如下代码： <!DOCTYPE ht

红太狼/ 2022年06月16日 06:55/ 0 赞/ 202 阅读

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

测试的浏览器有 1. chrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10\_12\_6) AppleWebKit/537.3

╰+攻爆jí腚メ/ 2022年05月23日 02:05/ 0 赞/ 145 阅读

相关 vue监听document的scroll事件

当前遇到了一个这样的业务场景：当页面滚动距离大于指定距离，显示回到顶部的按钮，否则隐藏按钮；项目构成：vue-cli + axios 要求：不使用jQuery,

偏执的太偏执、/ 2022年05月11日 18:16/ 0 赞/ 602 阅读

相关上大学究竟是来干什么的为什么会这样

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

一时失言乱红尘/ 2022年04月18日 03:44/ 0 赞/ 222 阅读

相关 vue @scroll 事件

vue 的 scroll 事件做首页按需加载的时候滚动条滚动到底部之后加载由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在div元素上绑定

一时失言乱红尘/ 2022年03月10日 13:28/ 0 赞/ 251 阅读