scrollTop失效的原因

原创已于 2022-10-14 14:42:11 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

于 2020-03-23 11:14:32 首次发布

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

scrollTop失效的原因

scrollTop是要设置在父元素上的，是元素滚动条滚动的高度
当一个元素的display属性为’none’时，对该元素设置scrollTop属性是无效的
不要设置 overflow:hidden，要用overflow:auto
子元素高度没有大于父元素高度，此时需要设置高度
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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

baiyikai

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【小河今学 | JavaScript】关于ScrollTop失效问题

LB_laber的博客

08-04

2092

ScrollTop失效问题

document.body.scrollTop用法

12-16

document.body.scrollTop用法

参与评论您还未登录，请先登录后发表或查看评论

解决VUE中document.body.scrollTop为0的问题

12-09

Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，

uniapp scroll-view 设置scrollTop无效

最新发布

2303_77072102的博客

09-15

380

在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）当我们使用 scroll-view的scroll-top的时候默认想让它回到顶部，当我们设置值为0的时候会不生效，

document.documentElement.scrollTop指定位置失效解决办法

weixin_30949361的博客

08-29

3406

近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。解决办法是document.documentElement.scrollTop改成document.body.scrollTop；如果是PC端项目，则使用document.documentElement.scrollTop。转载于:http...

关闭弹窗后document.documentElement.scrollTop = 0设置不生效问题

Momo_dyx的博客

06-18

322

猜测是因为打开弹窗后滚动条消失，所以获取不到位置。打开弹窗时先隐藏滚动条。关闭弹窗时再显示滚动条。

浅谈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。...

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...

vue项目设置scrollTop不起作用(总结)

10-17

主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

document.body.scrollTop 无效

03-30

289

许多朋友在网站页面文件头部做了以下声明时，发现网站上的对联广告的滚动就不动了，其实是声明使 JS 中的 document.body.scrollTop 无效了。转自:http://www.icdma.com.cn/blog/website/ad-js-scroll.html 也就是说网页做了以下声明： <!DOCTYPEhtmlPUBLIC"-//W3C//D...

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...

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是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？

el-table表格scrollTop赋值失败

06-18

### 问题分析与解决方案在使用 `el-table` 的过程中，如果尝试通过设置 `scrollTop` 来控制表格的滚动位置，可能会遇到无效的问题。这通常与以下几个因素有关：DOM 元素的选择、异步渲染机制以及事件绑定的时机。 #### 1. **DOM 元素选择不正确** `el-table` 的滚动区域并非整个表格组件，而是其内部的一个特定容器。通常，滚动区域是 `bodyWrapper`，但直接通过 `$refs` 获取到的 `multipleTable` 并不一定能直接访问到 `bodyWrapper` 的 DOM 节点[^1]。因此，需要确保正确地获取到实际的滚动容器。 ```javascript this.$nextTick(() => { const bodyWrapper = this.$refs.multipleTable.bodyWrapper; if (bodyWrapper) { bodyWrapper.scrollTop = desiredScrollTopValue; // 设置 scrollTop 值 } }); ``` #### 2. **异步渲染导致 DOM 尚未准备好** 在 Vue.js 中，由于组件的渲染是异步的，如果在组件尚未完全渲染完成时尝试设置 `scrollTop`，可能会因为目标 DOM 元素不存在而失败。为了解决这个问题，可以使用 `this.$nextTick` 确保 DOM 已经更新完毕后再执行操作[^1]。 #### 3. **事件绑定的时机** 如果在事件绑定时，滚动容器还未准备好，可能导致事件无法正常触发或设置失效。因此，在绑定滚动事件之前，需要确保滚动容器已经存在。 ```javascript this.$nextTick(() => { const bodyWrapper = this.$refs.multipleTable.bodyWrapper; if (bodyWrapper) { bodyWrapper.addEventListener('scroll', () => { const clientHeight = bodyWrapper.clientHeight; const scrollTop = bodyWrapper.scrollTop; const scrollHeight = bodyWrapper.scrollHeight; if (clientHeight + scrollTop + 300 > scrollHeight) { console.log(clientHeight + scrollTop); console.log(scrollHeight); } }); } }); ``` #### 4. **浏览器兼容性问题** 某些浏览器可能对 `scrollTop` 的设置有特殊的行为或限制。为了确保兼容性，可以在设置 `scrollTop` 后立即检查其值是否被正确应用，并根据需要进行调整。 ```javascript this.$nextTick(() => { const bodyWrapper = this.$refs.multipleTable.bodyWrapper; if (bodyWrapper) { bodyWrapper.scrollTop = desiredScrollTopValue; if (bodyWrapper.scrollTop !== desiredScrollTopValue) { bodyWrapper.scrollTop = desiredScrollTopValue; // 再次尝试设置 } } }); ``` --- ### 示例代码以下是一个完整的示例，展示如何正确设置 `el-table` 的 `scrollTop`： ```javascript methods: { setTableScrollTop(desiredScrollTopValue) { this.$nextTick(() => { const bodyWrapper = this.$refs.multipleTable.bodyWrapper; if (bodyWrapper) { bodyWrapper.scrollTop = desiredScrollTopValue; if (bodyWrapper.scrollTop !== desiredScrollTopValue) { bodyWrapper.scrollTop = desiredScrollTopValue; // 再次尝试设置 } } else { console.error('滚动容器未找到，请检查 $refs 是否正确'); } }); } } ``` 调用方法时： ```javascript this.setTableScrollTop(500); // 将 scrollTop 设置为 500 ``` --- ### 总结 `el-table` 的 `scrollTop` 设置无效的原因主要包括 DOM 元素选择错误、异步渲染机制、事件绑定时机不当以及浏览器兼容性问题。通过确保正确的 DOM 元素选择、使用 `this.$nextTick` 等待渲染完成以及处理浏览器兼容性问题，可以有效解决这一问题。 ---