scrollTop方法无效问题【已解决】

已于 2023-03-09 15:08:46 修改
阅读量7.1k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： CSS样式 文章标签： scrollTop JQuery JavaScript
于 2019-06-28 16:27:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/94014187
本文介绍了一个常见的div滚动问题及其解决方案。问题在于使用scrollTop()方法时，如果div设置了overflow-y:auto属性，可能导致滚动行为失效。文章指出，只需移除overflow-y:auto属性，scrollTop()方法即可正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.getElementById("scroll").scrollTop = 0; // 滚动到顶部

在网上查阅了很多方案，没有解决，原来因为在需要滚动的div中设置了overflow-y:auto导致的。
只需去掉overflow-y:auto，scrollTop()方法就能生效了。

解决vue单页路由跳转后scrollTop的问题
12-10
最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码 router.afterEach(function (to) { window....
CSS表达式(expression)解决IE6 position:fixed无效问题
09-25
本文将详细讲解如何使用CSS表达式（expression）来解决IE6中`position:fixed`无效的问题。 首先，我们来看一个常见的解决方法。在非IE6浏览器中，`position:fixed`可以直接应用到元素上，如下所示： ```css #gs { ...
微信小程序scroll-view组件设置 scroll-top无效问题解决
分享互联网的有趣知识~
12-29 4896
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。
微信小程序scroll-top不生效问题
pengju12345的博客
05-24 1464
昨天我在写微信小程序的聊天界面遇到的问题 当我进入页面的时候我需要把我的聊天记录定位到我的存储聊天记录框的最底下所以我需要给我的scroll-top传入一个动态的数值让他初始化的时候，发送信息的时候，接收消息的时候都要在最底下然而这个时候出现了问题： 我的html <scroll-view style="height: {{height-50}}px;" scroll-y scroll-top="{{scrollTop}}" > 我的js //生命周期函数 liaotianjil
scrollTop 设为 0 不生效的可能原因
最新发布
qq505751223的博客
05-29 391
确保 scroll-view 内容高度大于容器高度，否则滚动无意义。值（如设为 1 再设为 0）触发重新渲染。延迟设置，确保 DOM 更新完成。scroll-view 的。
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
qq_44776454的博客
12-05 6128
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
uniapp scroll-view 设置scrollTop无效
peachban的博客
11-03 3153
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）
小程序ScrollView置顶只会成功一次，修改scrollTop无效是什么问题？小程序如何做一键置顶？
Youyzq的博客
12-08 1452
为什么会有scrollTop只执行一次的这个问题？先滚动自己的页面看看这个参数会发生变化吗从控制台可以看出，无论我怎么滚动，scrollTop的值是不会变化的。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
通过以上步骤，我们可以有效地解决Vue中`@scroll`监听事件无效的问题，并实现滚动到底部时加载更多数据的功能。这个方法不仅保持了Vue的统一性，还提供了良好的用户体验。在实际项目中，可以根据具体需求进行适当的...
scrollTop 设置无效
11-13
要解决这个问题，你可以： 1. 确认目标元素是否正确，并能接收到滚动事件。 2. 使用`window.scrollTo()` 或者 `element.scrollTop = value;` 时，确保是在适当的时候（比如`DOMContentLoaded`事件触发后）执行。 3. ...
vue项目设置scrollTop不起作用(总结)
10-17
本文总结了在Vue项目中设置scrollTop不起作用的问题，并提供了解决方案。 问题描述： 在开发过程中，当页面内容较长，分为多个模块，每个模块都有对应的标题，点击标题后需要滚动到相应模块内容位置。为了实现这一...
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 3088
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
微信小程序scroll-view的scroll-top无效
q879936814的博客
01-13 1080
分析原因，滚动需要内容的高度大于盒子的高度，之前设置的高度一致。 修改scroll-view的height即可。 <scroll-view scroll-x scroll-y scroll-left="500" scroll-top="{{top}}" style="height: 1260rpx"> <image src="./img/map.jpg"></image> </scroll-view> ...
微信一键置顶实现之scroll-top设置不生效解决方案
祥哥的说
02-07 1169
背景： 长列表情况下，需要实现悬浮按钮，点击一键置顶 方案： 采用了scroll-view组件展示长列表，监听滚动距离，控制悬浮按钮的显示和隐藏，点击之后将scroll-top置为0，实现置顶。 **问题：**点击悬浮按钮之后，设置scroll-top为0，置顶功能不生效 解决方案： 将scroll-top的值默认设置为-1，置顶时设置为0 坑：直接设置为0无效，当值发生变化时，设置滚动条位置才生效 代码片段： const [scrollNum, setScrollNum] = useSt
关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例
weixin_30316097的博客
08-07 508
在最近的项目有做到关于小说阅读的进度条功能，其中用到scroll-view和slider组件，发现scroll-view中的scroll-top在设置值后无效，出现这种情况大概是以下几种问题： 1.scroll-view的高度需要设置固定的值，比如全屏可以设置：height:100vh; 2.不可以同时设置scroll-into-view和scroll-top（scroll-left）属性，因...
微信小程序 scroll-view 组件的 bindscroll 不触发不生效
joe0235的博客
08-29 2672
5、滚动的可能是page，如果确定page里的内容不需要滚动。只滚动scroll-view里的内容，禁用页面滚动。使用微信小程序基础组件中的scroll-view，但是滑动的时候 bindscroll 一直不生效。1、没有设置高度，根据小程序文档，在使用 scroll-view 组件用于竖向滚动时一定要设置高度。3、组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。4、scroll-view 里有两个子元素，加一个view给包起来。2、没有设定scroll-y。
微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题
wcxrib的博客
01-21 1050
解决方法：添加throttle="{{false}}" 属性，关闭官方默认节流，保证scroll事件能全部触发，自己实现节流即可。uni-app语法 :throttle="false"。问题： scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0 、toupper事件也没有收到等。原因：scroll-view组件自带节流，所以滑动过快时，会出现滑到顶部，scrollTop不为0的bug。
window.scrollTop 不生效的原因，如何解决
范德萨的博客
02-17 6643
需要获取到当前滚动条的页面元素，之后加上返回顶部的方法即可！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值