vue中使用scrollTo没有效果的完美解决方法

更新时间：2023年10月09日 15:02:24 作者：Smile_zxx

这篇文章主要介绍了在vue中使用scrollTo没有效果的解决方法,本文给大家分享具体操作步骤,在这里需要注意scrollTo要作用在可滚动的元素上,不然不生效,scrollTop就会一直为0,需要的朋友可以参考下

在vue中使用scrollTo没有效果的解决方法

首先需求：在播放列表中，章节目录列表自动定位到该小节，每次页面点击后重新进去要把当前的播放记录定位到当前位置中
方法：使用scrollTo：当前网页滚动到指定位置

具体的操作步骤

页面css的结构如下course-list 为可滚动的元素，滚动的位置为当前选中元素的offsetTop

this.$nextTick(() => {
	let activeCard = document.querySelector(".liveChapter-card-small.active")
	let scrollY = activeCard.offsetTop
	activeCard.parentElement.scrollTo(0, scrollY)
})

遇到的坑：

要使用this.$nextTick才能生效
scrollTo要作用在可滚动的元素上，不然不生效，scrollTop就会一直为0

补充：

vue项目设置scrollTop不起作用（解决方法及原因）

1、场景恢复

activated() {
this.$refs.viewBox.scrollTop = 100
console.log(this.$refs.viewBox.scrollTop)
}

控制台显示

0

2、解决办法

activated() {
this.$nextTick(() => {
this.$refs.viewBox.scrollTop = 100
})
console.log(this.$refs.viewBox.scrollTop)
}

控制台显示

100

3、原因

先考虑一个核心问题，activated究竟是在vue生命周期的哪个节点执行呢？

我们知道，要想使用activated，必须设置keep-alive（缓存组件，自身不会渲染dom元素）。当 keepAlive为 true时，keep-alive包裹的动态组件会被缓存。

当你的组件在 keep-alive内被切换，组件里的 activated 函数就会执行。也就是说，activated 方法执行的时候，并不会考虑你组件里的dom是否已渲染（大概率是没有渲染，毕竟组件一切换activated 就开始执行，页面的dom渲染根本来不及），dom都还没渲染，this.$refs.viewBox.scrollTop这种给dom赋值的代码肯定是赋值不上的。

再说一下

this.$nextTick() 方法，$nextTick 是在下次 DOM 更新结束之后执行延迟回调，意思很简单，就是等待dom刷新出来之后再执行的函数。简直就是activated里给dom赋值时的御用函数有没有。

到此这篇关于在vue中使用scrollTo没有效果的解决方法的文章就介绍到这了,更多相关vue使用scrollTo没有效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue
scrollTo

详解vue3+electron如何做到本地化
要在Vue 3和Electron中实现本地化,可以使用类似于在Vue项目中进行本地化的方式,本文为大家介绍了一种常见的做法,希望对大家有所帮助
2024-03-03
vue 遮罩和ref的使用setup版和非setup版
这篇文章主要介绍了vue 遮罩和ref的使用，setup版和非setup版,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
vue更新数据却不渲染页面的解决
这篇文章主要介绍了vue更新数据却不渲染页面的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
antd-DatePicker组件获取时间值,及相关设置方式
这篇文章主要介绍了antd-DatePicker组件获取时间值,及相关设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue 富文本编辑器tinymce的安装配置使用教程
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,这篇文章主要介绍了Vue 富文本编辑器tinymce的安装教程,需要的朋友可以参考下
2023-09-09
浅谈vue项目如何打包扔向服务器
本篇文章主要介绍了浅谈vue项目如何打包扔向服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue-resource安装过程及使用方法解析
这篇文章主要介绍了Vue-resource安装过程及使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
vue如何实现无缝轮播图
这篇文章主要介绍了vue如何实现无缝轮播图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue+elementUI中表格高亮或字体颜色改变操作
这篇文章主要介绍了vue+elementUI中表格高亮或字体颜色改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue2响应式系统之嵌套
这篇文章主要介绍了Vue响应式系统之嵌套，我们在开发中肯定存在组件嵌套组件的情况，下文将举例说明情况，需要的小伙伴可以参考一下
2022-04-04