scrollTop不生效解决（uniapp）

scrollTop不生效解决

直接解决不废话，两个问题仔细看

文章目录

scrollTop不生效解决
[一、使用scroll-view容器设置:scroll-top="scrollTop" 不生效](#一、使用scroll-view容器设置:scroll-top="scrollTop" 不生效)
- 1.scroll-view容器重写机制影响
- 2.scroll-view容器未设置固定高度
二、uni.pageScrollTo设置scrollTop滚动无效
总结

一、使用scroll-view容器设置:scroll-top="scrollTop" 不生效

原因：其实很简单，不生效就是没有执行，因为uniapp的scroll-view组件限制：在某些情况下，直接设置相同的scroll-top值可能不会触发重新渲染

1.scroll-view容器重写机制影响

举🌰子：

如果你是下面这种或者甚至不进行重写，他确实执行了这个方法但是组件内部认为值未变更所以不执行，超级简单

javascript 复制代码

scrollTopFun() {
				this.scrollTop = 0;
				// 1秒后重置滚动位置(uni.scrollTop机制需要改变值热重载，否则不生效)
				setTimeout(() => {
					this.scrollTop = 0;
				}, 50);
			},

直接设置重写即可

javascript 复制代码

scrollTopFun() {
				this.scrollTop = 1;
				// 1秒后重置滚动位置(uni.scrollTop机制需要改变值热重载，否则不生效)
				setTimeout(() => {
					this.scrollTop = 0;
				}, 50);
			},

2.scroll-view容器未设置固定高度

*注意事项*

如果如上设置了参数，也设置了:scroll-top="scrollTop"未生效，考虑是不是没有给容器设置固定高度，如果容器不设置固定高度滚动无效哦

html 复制代码

<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 600rpx">
	<view>
		<!-- ···你的内容 -->
	</view>
</scroll-view>

二、uni.pageScrollTo设置scrollTop滚动无效

代码如下（示例）：

javascript 复制代码

	uni.pageScrollTo({
	 scrollTop: 0,  //锚点位置
	 duration: 300  //过渡时间
	});

其实这个就更简单了，如果使用了scroll-view就使用上面的方法即可，如果没使用scroll-view，那就检查一下需要滚动的容器是否处于根节点，因为uni.pageScrollTo 属于页面级别的滚动，需要处于根节点才能生效

总结

问题一：scroll-view组件需要值变化才会触发重绘，试试先设个假值再改回来，就像哄小孩吃药先给颗糖🍬
问题二：没给scroll-view定高度就像让跳高选手在游泳池比赛------根本蹦跶不起来🏊‍♂️

终极提醒：uni.pageScrollTo只认页面级滚动，别把它关在小黑屋（子容器）里干活！❌