scroll-top不会生效的原因

最新推荐文章于 2025-04-15 13:56:31 发布
最新推荐文章于 2025-04-15 13:56:31 发布
阅读量386 收藏
点赞数
文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64974855/article/details/131089273
版权
这篇文章探讨了在微信小程序中使用scroll-view组件时，如何处理滚动效果的问题。特别是当点击事件触发时，通过改变scrollTop属性来实现滚动到顶部的效果。注意到，只有当scrollTop的值发生变化时，滚动才会更新。一种解决方法是利用三元运算符使scrollTop在0和1之间切换。

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

<scroll-view class="right" scroll-y :style="{height:wh+'px'}" :scroll-top="scrollTop">

<scroll-view-item @click="click"></scroll-view>

</scroll-view>

scrollTop:0

click(){

this.scrollTop=0

}

//如果scrollTop赋值与原来的值一样，scroll-top是不会生效的。可以使用this.scrollTop=this.scrollTop ? 0 : 1

shxs875
关注
【微信小程序】基础组件-scroll-view滚动视图容器
墨夶的博客
11-21 3192
组件是微信小程序中非常重要的布局组件，支持多种滚动行为和样式控制。通过合理使用组件及其属性和事件，可以构建出流畅且功能丰富的滚动视图。希望本文对你的微信小程序开发有所帮助。😊。
uniapp开发小程序时 `scroll-view` 的 `sticky` 样式失效问题及解决方法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-08 653
是小程序中常用的一个滚动容器，它允许我们在一定的区域内滚动显示内容。而在一些场景下，我们可能会需要给顶部的标签栏设置一个粘性效果，让它在页面滚动时固定在屏幕顶部，避免被其他内容遮挡。内的子元素时，遇到了一个奇怪的问题：当这个粘性元素到达父元素的底部时，粘性效果失效，元素会继续滚动，导致体验很差，甚至让我忍不住感叹：“这难道是 bug 吗？理论上，这样设置后，子元素一旦到达父元素的顶部，就会固定住，不再跟随滚动。在滚动到顶部时会固定住，不会再继续滚动，达到我们预期的粘性效果。就是需要固定在顶部的元素，而。
小程序笔记：scroll-view中设置了scroll-top为0置顶无效
qq_38337245的博客
09-23 1171
场景：比如一个订单详情里面有评价输入区域，评价完成之后，重新获取订单详情接口页面的高度会发生一些改变，我们就要设置页面滚回到顶部 标签： <scroll-view scroll-top="{{scrollTop}}" bindscroll="`bindscroll`"></scroll-view> data： scrollTop: 0, // 滚动到顶部 oldScrollTop: 0, // 滚动位置 滚动方法： bindscroll(e){ // 监听页面滚动 th
前端聊天室滚动到底部设置scrollTop无效？
楚楚梦厦的博客
11-10 1209
scrollTop无效 前端聊天室自动滚动到页面底部 前端聊天室滚动到顶部加载更多 scroll事件
＜scroll-view＞中scroll-into-view和scroll-top的作用
最新发布
m0_51429350的博客
04-15 456
是一个可滚动的视图容器组件，支持横向或纵向滚动。的垂直滚动位置（即滚动条距离顶部的距离，单位为像素）。属性用于控制滚动行为。，让视图滚动到该元素的位置，使其可见。
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scrollTop不生效的解决办法
ToKeepCalm的博客
02-28 2418
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 3049
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
qq_44776454的博客
12-05 5825
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
scrollTop设置不起效果的几种原因
smallNut的博客
01-17 1万+
今天在写需求的时候遇到一个要将表格的滚动条在进行路由跳转时固定的操作，然后没想到居然在scrollTop这个属性的设置上栽了坑，关于此问题的原因网络上的解释也五花八门，各不相同 这里我们以下图demo为例，给大家解释一下设置scrollTop属性设置无效可能会遇到的几个原因 1.父，子元素需设置高度，并且子元素高度必须大于父元素 这一点应该很好理解，如果子元素高度始终小于父元素，那么无论怎么设置scrollTop的值都不可能大于0 2.父元素需设置overflow: scroll 或 overflow-y：
uniapp小程序让页面滚动到底部_uniApp 和微信小程序 scroll-view 实现区域滚动 及scroll-top不生效的问题...
weixin_30304285的博客
12-24 1785
1.上下滚动因为高度的问题，scrollView没有填满所剩下的空间，没有实现区域滚动scroll-top 不生效的问题 ，比如想滚动到底部在用这个标签之前，很多地方需要阅读官方文档比如这句话 ：用竖向滚动时，需要给 一个固定高度，通过 css 设置 height。我的第二个问题就是因为没有设置高度导致 scroll-top不生效，但是设置高度百分之百又满足不了区域滚动，设置百分之分有时还会错位 ...
<scroll-view> 中 scroll-top 使用示例
01-17
值得注意的是，当设置了 `scroll-top` 后，它会立即生效并让容器内的内容按照设定的高度进行滚动显示；如果同时启用了动画效果 (`scroll-with-animation`) ，那么整个过程将以平滑过渡的形式展现给用户。
解决给元素设置scrollTop但不生效问题
kwroi的博客
11-15 4780
scrollTop
JQ scrollTop 无效的场景
weixin_30580943的博客
10-29 474
先要设置DOM为显示，然后在设置scrollTop，先后顺序不能调换。 转载于:https://www.cnblogs.com/llcdxh/p/9855920.html
js 设置scrollTop失效问题
weixin_43907110的博客
04-27 1157
在vue element 的弹框里面想要通过设置scroll控制弹框体滚动一直失效问题。目测应该是做滚动操作的时候窗口没有撑开，还没有拿到高度所以滚动失败，搞了我好久啧。前提：元素的overflow-y: scroll;这段代码一直不生效，后来改为一下写法就可以了。
scrollTop不生效的原因解决方法
热门推荐
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
【小河今学 | JavaScript】关于ScrollTop失效问题
LB_laber的博客
08-04 2023
ScrollTop失效问题
uniapp scroll-view 设置scrollTop无效
peachban的博客
11-03 3011
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）
异步加载设置元素的scrollTop不生效
sxl131415的博客
07-11 531
解决方案：scrollTop需要在异步加载完成后再调用，因为是异步的，在去后台获取数据的时候，如果scrollTop就触发了，那么就出现不生效的情况
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值