Vue滚动到指定位置的多种方式示例详解
脚本之家推荐阅读:
vue如何移动到指定位置(scrollIntoView)亲测避坑
需求:
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域。
方法一:锚点
锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。
//dom <a href="#li50" rel="external nofollow" >跳到50</a> <ul class="ul" id="ul"> <li v-for="(item, index) in new Array(100)" :key="index" :id="'li' + (index + 1)"> {{ index + 1 }} 只羊 </li> </ul> //或者js window.location.hash= '#li50';
hash和href的区别:
- hash为锚链接,并不会跳转到新的链接,只会在当前链接里面改变锚链。
- href表示重定向,得到完整的url,页面跳转到新的页面。
方法二:scrollTop
先计算指定dom距离顶部的高度offsetTop,再设置父元素的滚动距离scrollTop即可。
//dom <el-button type="primary" @click="link">跳到30</el-button> //js link() { let target = document.getElementById('li30'); let parent = document.getElementById('ul'); parent.scrollTop = target.offsetTop - parent.offsetTop; },
由于此处父元素距离顶部也有一定的高度,所以滚动距离需要先减去父元素的offsetTop,才是正确的滚动高度。
方法三:scrollTo
同scrollTop,只是换了种写法
link() { let target = document.getElementById('li30'); let parent = document.getElementById('ul'); // parent.scrollTop = target.offsetTop - parent.offsetTop; parent.scrollTo(0, target.offsetTop - parent.offsetTop); },
也可以通过ref来指定dom
this.$refs.ul.scrollTo(0, 300);
方法四:scrollIntoView
简单粗暴,将指定元素滚动到可视区域顶部、底部或中间:
behavior
定义动画过渡效果:“auto”、 “smooth”
//顶部 document.getElementById('li60').scrollIntoView(); //底部 document.getElementById('li60').scrollIntoView(false); //中间 document.getElementById('li60').scrollIntoView({ behavior: "smooth", block: 'center' });
Element.scrollIntoView():https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
到此这篇关于Vue滚动到指定位置的多种方式的文章就介绍到这了,更多相关Vue滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue3中实现使用element-plus调用message
这篇文章主要介绍了vue3中实现使用element-plus调用message,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09详解keep-alive + vuex 让缓存的页面灵活起来
这篇文章主要介绍了keep-alive + vuex 让缓存的页面灵活起来,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04关于element-ui日期时间选择器选不中12小时以后的时间详解
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下2022-08-08vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
今天小编就为大家分享一篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09Nuxt3项目中问题汇总之刷新页面useFetch无返回解决
Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架,这篇文章主要给大家介绍了关于Nuxt3项目中问题汇总之刷新页面useFetch无返回解决办法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)
这篇文章主要介绍了vue+vue-fullpage实现整屏滚动页面,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-06-06
最新评论