window.scroll无效、window.onscroll不响应

最新推荐文章于 2024-05-31 11:18:25 发布
最新推荐文章于 2024-05-31 11:18:25 发布
阅读量3.9k 收藏 3
点赞数 3
分类专栏： 前端 文章标签： js javascript vue dom html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/108230049
版权

解决方法

  1. document.body.scroll 代替 window.scroll来滚动页面
  2. window.onscroll不响应，换成document.body.scroll，同样不响应，网上搜索后，得知是body的高度设为了100%导致的，去掉即可。但是如果页面样式依赖于body的高度，这种办法就不好了
    最后通过document.body.addEventListener绑定事件解决了（原来是通过document.body.onscroll绑定的）
tanleiDD
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
window.onscroll无效问题
friendan的专栏
06-11 1万+
我的环境： | Grails Version: 3.1.4 | Groovy Version: 2.4.6 | JVM Version: 1.7.0_80 ------------------------------------------------------------------------------ --------------------------------------
$(window).scroll()触发失效
在希
08-11 2861
标题$(window).scroll()触发失效 最近遇到一个问题，在项目中写了$(“window”).scroll()方法，但是在滚动页面的时候发现此方法没有触发，后来查找原因才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发 解决方式：在页面结构布局完整的情况下将改样式去掉。 关于window.scroll系列方法汇总 & 滚动到指定元素位置 1.window.scroll() 概述 滚动窗口至文档中的特定位置。 语法 window.scroll(x-co
vue3中scrollTo不生效解决方案
最新发布
ygzhzzy的博客
05-31 375
其它随便，至于是为什么，我的理解是 overflow:hidden;是超出部分隐藏，它是强制你的高度就只能是你设置的大小，不管你怎么滚它就怎么大点，所以把它设为别的或注释掉试试呢；直接说原因，是css样式overflow引发的window.scrollTo();overflow一定不能为hidden。还有一点，记得设置高度。
H5在IOS微信浏览器上滑会出现空白回弹的问题
weixin_42098616的博客
11-30 3201
昨天第一次写H5，就遇到了一个大麻烦，写好的页面在IOS微信浏览器上面上滑时底部居然会出现浏览器空白，但松手时空白就会回弹，网上找了很多种方法，但是却没有效果，网上的方法大都是禁止浏览器滑动，然后给需要的地方加上滑动，但是我用着没有效果。无奈只能靠自己了，在对页面多次鼓捣之下。我发现一个问题，触发拉起底部空白并不是每次都会触发的：当我们第一次进入页面时从头开始滑动到底部时一般不会拉起底部空白，当我...
window.onscroll 事件不触发问题
weixin_45982960的博客
08-24 1692
要求：滚动鼠标时，触发滚动事件； 问题：滚动时，没有触发事件； html,body{ overflow-x: hidden; font-size: 16px; color: #666; margin: 0 auto; width: 100%; height: 100%; } window.onscroll = function () { console.log('我执行了') } 错误原因：我在写样式时对，body和html设置了wid..
vue3 elementplus使用container布局容器 scroll 失效问题
weixin_44536001的博客
06-05 683
当项目中的layout页面使用了container布局后 此时在展示页面中添加window.addEventListener("scroll")事件和document.body.scrollTop 相关都会失效，原因是因为具体的滚动是在el-mian元素上执行的我们需要在这个元素添加相关的监听操作。
记录一次scrollTo和scrollBy不生效的原因
苏一恒
03-22 528
至于是哪个滚动, 打开开发者工具, 在 more tools 里找到 layers, 图层里找到滚动列表里最长的元素,scrollTo 要设置到滚动的元素上, 不一定是父元素, 也不一定是 window 啥的.发现所有文章都没说到点子上, 简单记录下.然后,找到这个元素,对他设置滚动即可.
html scroll无效,window.onscroll无效问题
weixin_33901449的博客
06-03 1163
修改Spzac主题时发现侧边栏滚动固定不起作用了，看了一下Console也没输出，证明 window.onscroll 事件没有生效，排查了很久。一开始以为JS代码拼错了，但是看了半天没有问题。。。$(window).on('scroll', function () {var t = $(document).scrollTop();var r = $(".fixside").height();va...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
m0_57454052的博客
04-07 2424
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可， window.addEventListener('scroll',()=>{console.log(window.scrollY)}) 如果问为什么不能在vue组件上直接监听 一般来说根据我的测试情况，监听滚动基本上监听的都是整体document或者window。 监听的都是相对于整体（document或者window）的当前可见区域的文档片段（就是你眼睛可以看到的部分），而不是去监 听单个的DOM片段，因为这么做没有意
$(window).scroll无效的原因
weixin_43130844的博客
03-17 1048
如果在css中html、body的高度样式设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度，导致滚动监听事件失效
安卓微信浏览器scrollTop
m0_75149048的博客
02-08 61
结果在pc端的浏览器可以生效，pc端浏览器中的移动端模式可以生效，在苹果手机上的微信浏览器也可以生效，唯独在安卓手机的微信浏览器不能生效。前阵子在公司实现一个常见的需求，就是添加一个返回顶部的按钮，当滑动网页到一定程度后会出现这个按钮，需要获取到元素的滚动高度。解决是解决了，但是为什么呢？这几个写法有什么区别呢？以后遇到这种类型的兼容性问题一般这样处理就行了。后来发现在安卓手机的微信浏览器中。
scroll滚动事件兼容和polyfill
qq_36262295的博客
03-11 480
scroll
window.scrollTo方法的兼容性处理
weixin_43956521的博客
04-28 3454
在使用原生js，window.scrollTo()方法的时候安卓或者ios会存在兼容性问题导致window.scrollTo()不能够生效，添加下面代码 var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; window.scrollTo(0, 0); 注意：使用的时候需要dom结构加载完再使用该方法，否则该方法仍然可能失效 ...
window.scrollTo()
weixin_34162228的博客
11-10 740
scrollTo方法 工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。很简单对吧，大概如下范例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&...
解决iScroll 插件 在移动端手机页面不能滚动的问题
startMinsk的博客
08-26 1004
解决iScroll 插件 在移动端手机页面不能滚动的问题 最近在做一个移动端H5的画面，用到了iscroll插件，但是在移动端调试时，并不能滚动，经过一些尝试。 我们需要 在元素中加入touch-action:none;这个css就ok了。 好了，问题解决。 ...
window.scrollTo没反应的问题
热门推荐
weixin_37254196的博客
10-14 1万+
废话不多说，直接开讲！ 昨天遇到window.scrollTo没效果，很郁闷，其他网站很正常！ 找了半天，感觉自己给自己挖坑了，然后在填坑！ js="window.scrollTo(0,1000);" #如果执行没有效果，没有报错，请确定页面宽度要大于浏览器的宽度 driver.execute_script(js) 特别注意： 如果执行没有效果，没有报错，请确定页面宽度要大于浏览器的宽度 ...
移动端页面踩坑合集
Doubleu_的博客
10-22 489
上周接的一个移动端的活动，那是一踩一个坑啊，在chrome和模拟器上调试没问题，但是你万万想不到，手机的型号怎么这么多，做好各设备的兼容将是各前端er的重要使命，且任重而道远。 一、自适应布局 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1、layout viewport...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
dhwtxcz66815的博客
10-28 1137
1 onscroll事件失效 <!DOCTYPE html><html> <head> 　　<meta charset="utf-8"></head> <body onscroll="checkscroll()"> 　　<div class="father" > 　　　...
Vue window.location.href
08-16
在Vue中，可以使用window.location.href来在当前窗口中打开一个新的URL，比如可以使用window.location.href = 'https://www.cnblogs.com/guorongtao/'来在当前窗口中打开博客园的个人博客页面。这与在JavaScript中使用window.location.href的方式类似。在HTML中，可以使用<a href="https://www.cnblogs.com/guorongtao/">Welcome Test1</a>来创建一个链接，点击链接时会在新窗口中打开指定的URL。另外，如果你想在Vue中打开一个新的窗口，并指定窗口的大小、位置等参数，可以使用window.open来实现，例如：window.open('www.baidu.com','newindow','height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')。另外，如果你想在Vue中打开一个模态对话框（Modal Dialog），可以使用window.showModalDialog来实现，例如：window.showModalDialog('https://www.cnblogs.com/guorongtao','','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no')。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Window 打开新窗口的几种方式 window.location.href、window.open、window.showModalDialog](https://blog.csdn.net/qianluo111/article/details/125280622)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值