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

最新推荐文章于 2023-03-01 16:17:34 发布
原创 最新推荐文章于 2023-03-01 16:17:34 发布 · 5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #导航

本文讲述了在JavaScript编程中遇到的一个常见问题：当为页面同时设置多个滚动条监听事件时，只有最后一个设置的事件能够生效。文章提供了问题的原因分析，并给出了解决方案——将所有监听事件合并到一个函数中。

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

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

问题出在哪儿呢

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

如何解决这个问题呢

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

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

写了一个简单的监听滚动条事件
J20220913的博客
02-09 318
手写一个简单的 监听 滚动条事件
JavaScript事件监听之其它事件(页面加载事件、元素滚动事件、页面尺寸事件、M端事件)
最新发布
Bulut0907
06-03 2555
javascript在head中，直接获取btn，添加监听事件是无效的，因为btn为null。所以给window添加load事件，等window的资源加载完毕，再去执行回调函数就可以点击按钮了。改变div的内容长度或改变padding值，clientWidth都会变化，但改变border值，clientWidth不会变化。移动端有自己独特事件，比如最常见的touch(触屏事件/触摸事件)，Android和IOS都有，touch对象代表一个触摸点。当页面的宽度不断变化，控制台不停的打印页面的宽度数值。
jq和js滑动条到顶部距离获取
qq_34187029的博客
10-14 934
jquery 获取滚动条高度      获取浏览器显示区域的高度 ：    $(window).height();    获取浏览器显示区域的宽度 ：      $(window).width();    获取页面的文档高度 ：   $(document).height();    获取页面的文档宽度 ：$(document).width();      获取滚动条到顶部的垂
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 7092
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 663
在使用Bootstrap4滚动组件时遇到的一个问题：按照文档将所以需要的属性、值以及css写上后，active的样式消失。 错误结果图如下：原生active样式消失，不能看出滚动监听是否实现。需更改部分： 改为： 正确结果图如下：原生active样式出现，并且滚动监听效果可以实现。Bootstrap使用滚动监听时ID不能为纯数字。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3837
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1676
scrollTop一直为0，监听页面滚动不触发
vue监听scroll事件无效？（踩坑记录）
Dark_programmer的博客
01-11 4021
前端使用技术为VUE 踩坑记录 最近在项目里，因为需要监听滚动事件，就直接写监听代码如下： 尝试一、 html: <div id="scroll-div" @scroll="scrollHandle"> 监听我的滚动 <div> js: scrollHandle() { console.log("scrolll"); }, 但是事件并没有执行。于是想通过addEventListener原生的方式进行监听。将代码写入mounted 尝试二、 html: moun
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
12-01
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法，如下： 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化，拉大拉小时，没有反应；方法一：在标签上加入  onLoad=”” onResize=””  方法  写上对应的方法即可方法二：[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=functio
iframe或document监听滚动事件不起作用
卿本无忧的博客
03-01 3183
iframe或document监听滚动事件不起作用
bootstrap之滚动监听
banfu2106的博客
12-14 204
bootstrap之滚动监听 作者原创，未经允许，拒绝转载。 首先做一个导航，这个地方有一个 class="navbar-example" 是用来做绑定的 <div class="navbar-example"> <!-- 导航 a中href="#one" 来寻找锚点--> <ul class="nav nav-tabs" ro...
页面滚动事件无效小记
weixin_30266829的博客
09-03 413
在超过一个页面时会有返回顶部的需求，有时候会出现离奇的情况，就是明明页面滚动了好几页，但检测不到 srcoll 事件。 情况出在监听的元素内部元素高度超出该监听元素。特别需要提到的是，就算使用 window 来监听，一旦内部高度出现超出 body 的情况也不行，如内部某个元素高度设置 100vh 就无法检测到滚动事件。 参考文章: js绑定滚动事件，滚动事件无效，没有触发 转载于...
解决Layui滚动条的干扰与数据的监听工作
weixin_44543271的博客
06-09 1888
今天我想跟大家讲一下怎样运用layui 插件来完成表格渲染和监听。Layui这个插件最突出的设计就是在于它的表格。 我们常常会运用到layui来完成表格的渲染设置，但是在运用的时候要注意到一些问题。比如在这一次做项目中我就运用layui这个插件来完成表格渲染的功能。但是在这次表格渲染过程中我就遇到表格下面出现了滚动条。刚开始以为是受到我搭建页面时候，设置内外边距的影响。为此琢磨了好久，最后发现是l...
Boostrap 滚动监听 不滚动解决方案
bb3696的博客
09-27 283
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 1412
我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)，关于这两个事件这里不...
滚动事件没有效果
k19970320j的博客
03-15 551
在使用VueJS项目中，使用window.onscroll事件监听页面滚动，发现没用效果，找网上查找了资料，原因是父级元素使用overflow:auto，去掉这个元素就可以。 在移动端滚动滑动效果中，使用better-scroll，有很多坑，比如：会使定位元素失效，点击事件失效，原生的window.onload事件失效 ...
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1453
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值