scrollTop失效的原因

原创 已于 2022-10-14 14:42:11 修改 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #javascript

于 2020-03-23 11:14:32 首次发布
本文探讨了在前端开发中，元素的scrollTop属性为何会失效。主要原因是元素的display属性被设置为'none'，或者overflow属性被错误地设置为'hidden'而非'autо'。此外，如果子元素高度小于父元素，也可能导致问题。文章提供了检查和修正这些设置的方法，以确保元素滚动条正常工作。

scrollTop失效的原因

  1. scrollTop是要设置在父元素上的，是元素滚动条滚动的高度
  2. 当一个元素的display属性为’none’时，对该元素设置scrollTop属性是无效的
  3. 不要设置 overflow:hidden，要用overflow:auto
  4. 子元素高度没有大于父元素高度，此时需要设置高度
  5. DTD文档模式，因为设置头部
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    解决方法？未测试
let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
baiyikai
关注
【小河今学 | JavaScript】关于ScrollTop失效问题
LB_laber的博客
08-04 2092
ScrollTop失效问题
解决VUE中document.body.scrollTop为0的问题
10-18
当开发者试图使用document.body.scrollTop来获取当前滚动条位置时，可能会遇到这个值一直返回0的情况。这种现象特别容易在不同浏览器之间出现兼容性问题，尤其在使用DOCTYPE声明时，不同浏览器可能有着不同的表现。 ...
document.documentElement.scrollTop指定位置失效解决办法
weixin_30949361的博客
08-29 3406
近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。 解决办法是document.documentElement.scrollTop改成document.body.scrollTop； 如果是PC端项目，则使用document.documentElement.scrollTop。 转载于:http...
uniapp scroll-view 设置scrollTop无效
最新发布
2303_77072102的博客
09-15 379
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）当我们使用 scroll-view的scroll-top的时候 默认想让它回到顶部，当我们设置值为0的时候会不生效，
关闭弹窗后document.documentElement.scrollTop = 0设置不生效问题
Momo_dyx的博客
06-18 322
猜测是因为打开弹窗后滚动条消失，所以获取不到位置。打开弹窗时先隐藏滚动条。关闭弹窗时再显示滚动条。
Vue重构项目时对document.body.scrollTop的设置不起作用
qq_42983685的博客
11-06 4859
用Vue重构项目时对document.body.scrollTop的设置不起作用 goto(index) { this.index=index let goto = document.getElementsByClassName('scroll-item'); // 获取滚动条需要移动的高度 let total =goto[index...
document.body.scrollTop 无效
03-30 289
许多朋友在网站页面文件头部做了以下声明时，发现网站上的对联广告的滚动就不动了，其实是声明使 JS 中的 document.body.scrollTop 无效了。 转自:http://www.icdma.com.cn/blog/website/ad-js-scroll.html 也就是说网页做了以下声明： <!DOCTYPEhtmlPUBLIC"-//W3C//D...
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
10-24
官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理
使用scrollTop(）解决IOS中输入法遮挡输入框问题
08-29
解决此问题的方法之一是使用 scrollTop() 函数。下面是详细的解决方案： 一、问题描述 在 IOS 浏览器中，当用户点击输入框时，输入法会弹出遮挡输入框，从而导致用户无法正常输入内容。这是由于 IOS 浏览器的...
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
09-05
这段代码首先尝试获取`window.pageYOffset`，如果浏览器不支持，则回退到`document.documentElement.scrollTop`，如果还不行，再尝试`document.body.scrollTop`，最后如果所有尝试都失败，将`scrollTop`设为0。...
document.body.scrollTop无效的解决方法
weixin_30617797的博客
07-09 2092
1、document.body.scrollTop = 0 有时候不生效，两种解决方案，试试看。 1-1、设置：document.documentElement.scrollTop = 0;1-2、设置：window.scrollTo(0, 0); 转载于:https://www.cnblogs.com/ilovexiaoming/p/11155454.html...
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scrollTop不生效的原因解决方法
热门推荐
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
XHTML document.body.scrollTop无效解决方法
JiangMiao的专栏
11-08 1331
用 document.documentElement.scrollTop 代替
scrollTop不生效的解决办法
ToKeepCalm的博客
02-28 2629
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
document.documentElement.scrollTop 在谷歌 chrome 下高度无效
weixin_30610755的博客
07-27 151
document.documentElement.scrollTop 在谷歌 chrome 下高度无效 这时候 我们 document.documentElement.scrollTop+document.body.scrollTop; 这样即可 。 转载于:https://www.cnblogs.com/mijava/p/3219426.html...
el-table表格scrollTop赋值失败
06-18
`el-table` 的 `scrollTop` 设置无效的原因主要包括 DOM 元素选择错误、异步渲染机制、事件绑定时机不当以及浏览器兼容性问题。通过确保正确的 DOM 元素选择、使用 `this.$nextTick` 等待渲染完成以及处理浏览器兼容...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值