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没有效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
vue2和el-input无法修改和写入并且不报错的解决方案
这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
Vue 最独特的特性之一,是其非侵入性的响应式系统,下面这篇文章主要给大家介绍了关于Vue响应式原理源码剖析的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-10-10
使用Vue Composition API写出清晰、可扩展的表单实现
这篇文章主要介绍了使用Vue Composition API写出清晰、可扩展的表单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了vue2项目使用exceljs多表头导出全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧2021-09-09
本文主要介绍了VUE3项目VITE打包优化的实现,包括使用视图分析工具、路由懒加载、第三方库CDN引入、gzip压缩、按需引入第三方库、TreeShaking、剔除console和debugger、分包策略和图片压缩等,具有一定的参考价值,感兴趣的可以了解一下2025-03-03
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论