为什么写的滚动条监听事件无效

最新推荐文章于 2023-03-01 16:17:34 发布
最新推荐文章于 2023-03-01 16:17:34 发布
阅读量4.8k 收藏
点赞数 2
分类专栏： JS web前端 文章标签： javascript 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchsail/article/details/52933386
版权

为什么js写的页面滚动条监听事件失效了

前几天写代码时，为页面导航栏写了滚动条监听，是可以正常工作的。
后来，我为页面的两个按钮也写了一个滚动条监听事件，发现导航栏监听失效了。

问题出在哪儿呢

原因是一个页面只有一个window.onscroll会被执行，而我写了两个window.onscroll，
所以为导航栏写的window.onscroll失效了

如何解决这个问题呢

我们只需要把两个函数，写成一个函数，
var t = document.documentElement.scrollTop || document.body.scrollTop;

在这个函数中使用同一个变量即可

lchSAIL
关注
专栏目录
写了一个简单的监听滚动条事件
J20220913的博客
02-09 220
手写一个简单的 监听 滚动条事件
vue为啥监听不了@scroll
最新发布
m0_59157023的博客
07-02 394
事件冒泡：滚动事件可能被封装在某些组件内部，导致不会冒泡到父元素上。绑定scroll事件的div容器应该有overflow 可以滚动的。哈喽 大家好 我在vue中写了一个滚动scroll监听事件。然后滚动鼠标 发现进不来我的方法断点。正确绑定到了可滚动容器上。属性，使得元素不可滚动。事件绑定错误：确保你使用。组件内部没有正确地设置。
JS-获取网页滑动距离，并实时监听
热门推荐
weixin_43937466的博客
09-05 1万+
本文主要介绍通过JS获取网页滑动距离，并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6387
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
Bootstrap滚动监听不起效果/踩坑记录/active（激活）样式消失
weixin_42448252的博客
10-26 545
在使用Bootstrap4滚动组件时遇到的一个问题：按照文档将所以需要的属性、值以及css写上后，active的样式消失。 错误结果图如下：原生active样式消失，不能看出滚动监听是否实现。需更改部分： 改为： 正确结果图如下：原生active样式出现，并且滚动监听效果可以实现。Bootstrap使用滚动监听时ID不能为纯数字。
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3524
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1443
scrollTop一直为0，监听页面滚动不触发
解决Layui滚动条的干扰与数据的监听工作
weixin_44543271的博客
06-09 1804
今天我想跟大家讲一下怎样运用layui 插件来完成表格渲染和监听。Layui这个插件最突出的设计就是在于它的表格。 我们常常会运用到layui来完成表格的渲染设置，但是在运用的时候要注意到一些问题。比如在这一次做项目中我就运用layui这个插件来完成表格渲染的功能。但是在这次表格渲染过程中我就遇到表格下面出现了滚动条。刚开始以为是受到我搭建页面时候，设置内外边距的影响。为此琢磨了好久，最后发现是l...
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
12-01
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法，如下： 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化，拉大拉小时，没有反应；方法一：在标签上加入  onLoad=”” onResize=””  方法  写上对应的方法即可方法二：[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=functio
vue中改变滚动条样式的方法
10-15
vuescroll是一个轻量级且功能强大的Vue滚动组件，它可以提供自定义滚动条样式、平滑滚动、滚动监听等功能。 1. **安装vuescroll**：首先，你需要通过npm安装vuescroll库： ```bash npm install vuescroll ``` ...
用滚动条和键盘方向键控制移动显示图片-易语言
06-13
3. 图片移动边界检查：当用户尝试移动超出图片范围时，需要限制滚动条的值，防止出现无效的坐标。 4. 用户体验优化：可以增加平滑滚动的效果，而不是立即跳跃到新的位置，这可以通过逐渐改变图片位置来实现。 5. ...
iframe或document监听滚动事件不起作用
卿本无忧的博客
03-01 2627
iframe或document监听滚动事件不起作用
bootstrap之滚动监听
banfu2106的博客
12-14 146
bootstrap之滚动监听 作者原创，未经允许，拒绝转载。 首先做一个导航，这个地方有一个 class="navbar-example" 是用来做绑定的 <div class="navbar-example"> <!-- 导航 a中href="#one" 来寻找锚点--> <ul class="nav nav-tabs" ro...
页面滚动事件无效小记
weixin_30266829的博客
09-03 324
在超过一个页面时会有返回顶部的需求，有时候会出现离奇的情况，就是明明页面滚动了好几页，但检测不到 srcoll 事件。 情况出在监听的元素内部元素高度超出该监听元素。特别需要提到的是，就算使用 window 来监听，一旦内部高度出现超出 body 的情况也不行，如内部某个元素高度设置 100vh 就无法检测到滚动事件。 参考文章: js绑定滚动事件，滚动事件无效，没有触发 转载于...
Boostrap 滚动监听 不滚动解决方案
bb3696的博客
09-27 216
Boostrap 滚动监听 不滚动解决方案 <div class="col-xl-6 text-right"> <ul class="nav navbar navbar-nav"> <li class="nav-item"><a class="nav-link active" href="#about" style="width:100px" ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
weixin_35374026的博客
06-04 1281
我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)，关于这两个事件这里不...
jquery 监听滚动条滚动事件
05-05
可以使用 jQuery 的 `scroll` 方法来监听滚动条滚动事件。 示例代码： ```javascript $(window).scroll(function() { // 在此处编写滚动事件的处理代码 }); ``` 上面的代码中，`$(window)` 选择器表示监听整个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值