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无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在做文字处理的项目时经常会遇到搜索文字并高亮的需求,常见的实现方式有插入标签和贴标签两种,这两种方式适用于不同的场景,各有优劣,下面我们就来看看他们的具体实现吧2023-11-11
ArcGis API for js在vue.js中的使用示例详解
这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了关于Vue-cli3烦人的eslint问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文介绍了如何在Vue3项目中封装一个时间信息收集组件,采用双向绑定响应式数据,通过对Element-Plus的Slider组件二次封装,实现时间轴功能,解决了小数计算导致匹配问题和v-model绑定组件无效问题,感兴趣的朋友跟随小编一起看看吧2024-09-09
本文主要介绍了vue单页面改造多页面应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue使用js-file-download完成导出功能实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue的虚拟DOM使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
这篇文章主要介绍了vue axios 给生产环境和发布环境配置不同的接口地址，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要为大家详细介绍了vue仿淘宝订单状态tab切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论