滚动事件没有效果

最新推荐文章于 2023-03-13 22:51:21 发布
最新推荐文章于 2023-03-13 22:51:21 发布
阅读量464 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k19970320j/article/details/104875652
版权

在使用VueJS项目中，使用window.onscroll事件监听页面滚动，发现没用效果，找网上查找了资料，原因是父级元素使用overflow:auto，去掉这个元素就可以。
在移动端滚动滑动效果中，使用better-scroll，有很多坑，比如：会使定位元素失效，点击事件失效，原生的window.onload事件失效

aicherish
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js scroll.js踩过的坑坑坑坑坑....
weixin_38667820的博客
01-07 1106
最近使用vue做了一个移动端的项目，使用了js的scroll.js的滚动插件。由于是第一次使用，期间遇到过不少的问题，当然问人是不可能问人的，估计大家都比我忙，就只能自己解决啦，下面就一一列出问题和解决方案，希望对大家有帮助啦 简单说一下IScroll的DOM结构 IScroll的初始化 还有更多的参数说明和调用方法请参考官网http://iscrolljs.com 问题集锦 1、...
jquery 滚动条事件简单实例
10-27
通过使用`$(window).bind("scroll", function() {...})`，我们为窗口的滚动事件注册了一个处理函数，即`showload`。当用户滚动页面时，这个函数就会执行，更新`lazyheight`并检查是否到达页面底部。 在这个实例中，...
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
1
12-14 7247
多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true)
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6120
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
js滚动失效
冬日的编程心得
06-08 2259
js脚本中的滚动事件失效应该是样式表里面有绝对定位，导致无法触发页面滚动事件。
vue中滚动事件绑定的函数无法调用问题
weixin_34226182的博客
10-11 509
问题描述： 一个包含下拉加载的页面，刷新当前页然后滚动页面，能够正常触发滚动事件并调用回调函数，但是如果是进了某一个页面然后再进的该页面，滚动事件能够触发， 但是回调函数在滚动的时候只能被调用一次。 关键代码： 包含下拉加载的页面中，mounted中绑定scroll，在beforeRouteLeave中取消事件绑定 this.ele.addEventListener(...
让页面滚动固定位置：滚动事件不生效的情况（可用的三种方法）
weixin_58487208的博客
02-28 2129
需求是页面滚动到指定位置或指定元素（让该元素的顶端与视口顶部距离为0） 首先可以用window.scrollTo(x,y),不推荐。因为这个方法经常失效，且一般是滚动定值使用。 其次是document.documentElement.scrollTop = document.getElementById('el').clientHeight,不推荐。 最后是最能达到效果的document.getElementById('el').scrollIntoView({behavior: 'smooth'})
marquee滚动效果源代码
11-03
无缝滚动则更加流畅，内容在到达终点后立即返回起点，给人一种没有停留的视觉效果。要实现这种效果，通常需要使用JavaScript或者CSS动画。由于HTML5不推荐使用marquee标签，因此在现代网页设计中，更常见的是使用CSS...
JS鼠标滚动分页效果示例
10-19
在给出的代码示例中，`$(".table-scrollable").scroll()`监听滚动事件。`scrollTop`记录滚动条的位置，`windowScrollhight`代表可视区域高度，`domhight`表示整个内容区域的高度。当`scrollTop`减去一个常数值（在这...
JS实现无缝循环marquee滚动效果
10-19
总的来说，实现无缝循环的marquee滚动效果涉及到了HTML结构设计、CSS样式调整以及JavaScript事件监听和滚动逻辑处理。这个过程需要对浏览器的兼容性有深入理解，同时也体现了JavaScript在动态效果实现上的灵活性。...
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
JS实现标签滚动切换效果
10-18
标题中的“JS实现标签滚动切换效果”指的是使用JavaScript编程语言来创建一个动态的网页交互功能，使得当用户点击特定的标签（item）时，页面上的内容区域能够进行平滑滚动并切换显示相应的内容。这个效果通常用于...
解决luckysheet移动端滚动异常 - 总结passive和jq的off
badbaby52906的博客
03-13 1146
passive到底有啥用啊？
js绑定滚动事件，滚动事件无效，没有触发
热门推荐
starandsea的专栏
01-16 2万+
js绑定滚动事件方法： $(window).bind('scroll', function(){}); 或者window.onscroll=function(){} 滚动事件没有触发原因： 如上是绑定在window上的，如果html的高度没有超过整个浏览器高度，比如设置的是框架大小100%，那么是不会触发滚动的。 同样如果绑定在body上，body的高度需要比框架大才行。如果bo
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题...
sfkong31893189的博客
01-15 1177
web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden...
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1367
scrollTop一直为0，监听页面滚动不触发
scroll滚动事件在浏览器中无效
wjq_xxq的博客
05-03 1万+
因为兼容性问题scrollTop 被卷去的头部 它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离怎么得到scrollTopwindow.onscroll = function() { 页面滚动语句 } 1.谷歌浏览器 和没有声明 DTD ： document.body.scrollTop; 2.火狐 和其他浏览器 (就是document.html.scrollto
css怎么设置没有滚动条但是能滚动
最新发布
03-28
可以使用CSS的overflow属性，将其设置为auto或scroll，并且设置一个固定的高度或宽度，这样当内容超出这个高度或宽度时，就会出现滚动条。但是如果想要没有滚动条却能滚动，可以考虑使用JavaScript实现。具体做法是给元素添加一个mousedown事件，当鼠标按下时，记录下鼠标的位置，并且给元素添加一个mousemove事件，当鼠标移动时，计算出鼠标移动的距离，并且将元素的scrollTop或scrollLeft属性设置为相应的值，这样就可以实现元素的滚动效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值