vue 页面加载的时候，滚动导航到指定位置

最新推荐文章于 2024-10-25 16:00:53 发布

RightNaid

最新推荐文章于 2024-10-25 16:00:53 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript jquery

本文链接：https://blog.youkuaiyun.com/RightNaid/article/details/105736373

vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue页面加载时，如何实现根据路由参数保持横向导航选中状态并滚动到对应位置。核心方法是在$nextTick中使用scrollTo，通过获取选中导航的位置并应用到外层div的scrollLeft，确保页面加载时选中导航位于可视区开头。

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

vue 页面加载的时候，滚动导航到指定位置

今天遇到一个问题，横向的导航是可滚动的，刷新页面要保持当前选中的导航的状态，并且当前选中的导航要保持的第一个的位置
在这里插入图片描述
即根据路由参数，设置dom的滚动长度。
核心代码如下：

created() {
	this.handleData();
},
methods: {
	handleData() {
		// this.actives是当前选中导航的id
		// 滚动主要放在了nextTick
		this.$nextTick(() => {	
			const left = document.getElementById(this.actives).offsetLeft;
			this.$refs.nav.scrollTo({
				left: left,
				behavior: "smooth"
			})
		})
	},
},

直接在方法里写scrollTo，传统页面可以，但是用vue框架不生效
参考资料之后，在相关方法的后面加上$nextTick，滚动代码写在这里
思路如下：
首先获取当前选中导航距离左侧的位置，即：const left = document.getElementById(this.actives).offsetLeft;
left的值也可以用vue的ref获取，在这里，我给遍历的每个导航小元素加了id
接下来，用ref获取外层的div并用scrollTo函数，给出距离左侧的滚动位置，即为left的值

这样，页面初始加载的时候就能根据当前路由参数，把选中的导航放到当前页面的第一个位置