scrollTop失效的原因

已于 2022-10-14 14:42:11 修改
阅读量992 收藏
点赞数
文章标签： js javascript
于 2020-03-23 11:14:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiyikai/article/details/105043393
版权

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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
10-24
官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理
document.body.scrollTop用法
12-16
document.body.scrollTop用法
scrollTop不生效的解决办法
ToKeepCalm的博客
02-28 793
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
JS之scrollTop不起作用的问题(兼容性有问题)
weixin_30216561的博客
12-28 764
scrollTop在使用的时候，如果用document.body.scrollTop去使用它，谷歌会出现不兼容的问题，也就是不显示数值大小 解决方案：1.换个浏览器使用 2.没有dtd约束的：document.title = document.body.scrollTop 有dtd约束的：document.titl...
document.body.scrollTop无效的解决方法
weixin_30617797的博客
07-09 1957
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...
JavaScript学习笔记之 document.body.scrollTop用法
热门推荐
jiabin_xu的博客
06-01 3万+
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWid...
【小河今学 | JavaScript】关于ScrollTop失效问题
LB_laber的博客
08-04 1840
ScrollTop失效问题
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 2507
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
document.body.scrollTop的值总为零的解决办法
weixin_42929937的博客
11-15 1883
1. 在模拟点击返回顶部按钮，页面就会滑动到顶部，但是在获取页面卷去头部的大小时，document.body.scrollTop总是为0. 后面尝试用了document.documentElement.scrollTop就可以获得被卷去的头部。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible
document.body.scrollTop滚动失效
果果的博客
09-20 1960
先来说一下场景： 进入页面之后，需要页面滚动到指定的标签位置，但是如下设置之后，并没有什么效果 document.body.scrollTop=(0,300) 解决方案： let htmlDom = document.documentElement; htmlDom.scrollTo(0,300) 问题解决了，但是这2中写法有啥区别呢？咱们继续往下看： 1、什么是doc...
使用scrollTop(）解决IOS中输入法遮挡输入框问题
08-29
ios浏览器上输入法会弹出遮挡输入框问题，下面小编给大家分享scrollTop(）解决IOS中输入法遮挡输入框问题，一起看看吧
scrollLeft,scrollTop等等详解.pdf
02-23
网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕...
XHTML下,JS浮动代码失效的问题
12-10
对联代码，查阅它在xhtml下的表达方式，结果很简单了。这是因为，按照标准来说，... （失效范围：XHTML 1.0 transitional.dtd；XHTML 1.0 strict.dtd；XHTML 1.0 frameset.dtd；xHTML 1.1 DTD） 软件开发网编辑小结一下
微信小程序实现美团菜单
12-10
问题：我设置菜品高度的单位是rpx，而scrollTop的单位是px，这也就是说，上面我计算的x是个变量， 所以当改变测试机型，这个功能就失效了。。。请教各位有什么好的方法没？ onLoad(e) { let good
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 388
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1008
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 515
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 303
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
移动端设置overflow:scroll后scrollTop失效并一直为0
05-18
在移动端，如果你想要使用 `overflow:scroll` 实现滚动条功能，需要同时设置元素的高度，并保证元素内部有足够多的内容超出元素高度，才能正确响应 `scrollTop` 属性。否则，`scrollTop` 属性会一直为0，无法实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值