Vue滚动到指定位置的多种方式
需求:当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域。方法一:锚点锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。//dom<a href="#li50">跳到50</a><ul cl
·
需求:
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域。
方法一:锚点
锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。
也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。
//dom
<a href="#li50">跳到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
更多推荐
已为社区贡献1条内容
所有评论(0)