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

最新推荐文章于 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 235
手写一个简单的 监听 滚动条事件
android webview 滑动事件监听,Android中解决WebView上下滑动监听问题
weixin_33741534的博客
05-26 1157
有些时候我们需要监听webview的滚动事件，但WebView没有直接监听滑动的方法，看WebView的源码则会发现有一个protected void onScrollChanged(int l, int t, int oldl, int oldt)方法。这个方法。是受到保护的所以我们无法直接使用，所以我们写一个加强的WebView，重写onScrollChanged方法并利用接口回调。publi...
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6510
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 568
在使用Bootstrap4滚动组件时遇到的一个问题：按照文档将所以需要的属性、值以及css写上后，active的样式消失。 错误结果图如下：原生active样式消失，不能看出滚动监听是否实现。需更改部分： 改为： 正确结果图如下：原生active样式出现，并且滚动监听效果可以实现。Bootstrap使用滚动监听时ID不能为纯数字。
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3578
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1477
scrollTop一直为0，监听页面滚动不触发
vue中改变滚动条样式的方法
10-15
vuescroll是一个轻量级且功能强大的Vue滚动组件，它可以提供自定义滚动条样式、平滑滚动、滚动监听等功能。 1. **安装vuescroll**：首先，你需要通过npm安装vuescroll库： ```bash npm install vuescroll ``` ...
用滚动条和键盘方向键控制移动显示图片-易语言
06-13
3. 图片移动边界检查：当用户尝试移动超出图片范围时，需要限制滚动条的值，防止出现无效的坐标。 4. 用户体验优化：可以增加平滑滚动的效果，而不是立即跳跃到新的位置，这可以通过逐渐改变图片位置来实现。 5. ...
浏览器窗口大小变化时使用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 2692
iframe或document监听滚动事件不起作用
bootstrap之滚动监听
banfu2106的博客
12-14 152
bootstrap之滚动监听 作者原创，未经允许，拒绝转载。 首先做一个导航，这个地方有一个 class="navbar-example" 是用来做绑定的 <div class="navbar-example"> <!-- 导航 a中href="#one" 来寻找锚点--> <ul class="nav nav-tabs" ro...
页面滚动事件无效小记
weixin_30266829的博客
09-03 340
在超过一个页面时会有返回顶部的需求，有时候会出现离奇的情况，就是明明页面滚动了好几页，但检测不到 srcoll 事件。 情况出在监听的元素内部元素高度超出该监听元素。特别需要提到的是，就算使用 window 来监听，一旦内部高度出现超出 body 的情况也不行，如内部某个元素高度设置 100vh 就无法检测到滚动事件。 参考文章: js绑定滚动事件，滚动事件无效，没有触发 转载于...
解决Layui滚动条的干扰与数据的监听工作
weixin_44543271的博客
06-09 1824
今天我想跟大家讲一下怎样运用layui 插件来完成表格渲染和监听。Layui这个插件最突出的设计就是在于它的表格。 我们常常会运用到layui来完成表格的渲染设置，但是在运用的时候要注意到一些问题。比如在这一次做项目中我就运用layui这个插件来完成表格渲染的功能。但是在这次表格渲染过程中我就遇到表格下面出现了滚动条。刚开始以为是受到我搭建页面时候，设置内外边距的影响。为此琢磨了好久，最后发现是l...
Boostrap 滚动监听 不滚动解决方案
bb3696的博客
09-27 238
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 1310
我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)，关于这两个事件这里不...
滚动事件没有效果
k19970320j的博客
03-15 494
在使用VueJS项目中，使用window.onscroll事件监听页面滚动，发现没用效果，找网上查找了资料，原因是父级元素使用overflow:auto，去掉这个元素就可以。 在移动端滚动滑动效果中，使用better-scroll，有很多坑，比如：会使定位元素失效，点击事件失效，原生的window.onload事件失效 ...
使用js scroll.js踩过的坑坑坑坑坑....
weixin_38667820的博客
01-07 1186
最近使用vue做了一个移动端的项目，使用了js的scroll.js的滚动插件。由于是第一次使用，期间遇到过不少的问题，当然问人是不可能问人的，估计大家都比我忙，就只能自己解决啦，下面就一一列出问题和解决方案，希望对大家有帮助啦 简单说一下IScroll的DOM结构 IScroll的初始化 还有更多的参数说明和调用方法请参考官网http://iscrolljs.com 问题集锦 1、...
jquery 监听滚动条滚动事件
最新发布
05-05
可以使用 jQuery 的 `scroll` 方法来监听滚动条滚动事件。 示例代码： ```javascript $(window).scroll(function() { // 在此处编写滚动事件的处理代码 }); ``` 上面的代码中，`$(window)` 选择器表示监听整个窗口的滚动事件，您也可以替换它为其他 DOM 元素的选择器来监听该元素的滚动事件。在 `scroll` 方法内部编写处理代码即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值