vue中使用scrollTo无效的解决方法
更新时间：2023年08月21日 09:26:58 作者：Smile_zxx
本文主要介绍了vue中使用scrollTo无效的解决方法，想要使用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中使用scrollTo无效的解决方法的文章就介绍到这了,更多相关vue scrollTo无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Axios提供了简单而强大的API来处理HTTP请求,而FormData提供了用于构建表单数据的API,这篇文章主要介绍了Vue中如何使用Axios发送FormData请求,需要的朋友可以参考下2024-07-07
这篇文章主要为大家介绍了封装一个更易用的Dialog组件过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
vue element实现将表格单行数据导出为excel格式流程详解
这篇文章主要介绍了vue element实现将表格单行数据导出为excel格式流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
vue项目element-ui级联选择器el-cascader回显的问题及解决
这篇文章主要介绍了vue项目element-ui级联选择器el-cascader回显的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
VS Code打开vue文件出现很多黄色波浪线的完美解决办法
作为一名经验丰富的开发者,下面这篇文章主要给大家介绍了关于VS Code打开vue文件出现很多黄色波浪线的完美解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-04-04
关于element同时使用Drawer和Dialog出现多个遮罩问题
这篇文章主要介绍了关于element同时使用Drawer和Dialog出现多个遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了VUE项目中封装Echart折线图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue前端如何向后端传递参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了vue的axios和mock.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Vue中避免滥用this去读取data中数据的的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
最新评论