vue如何移动到指定位置(scrollIntoView)亲测避坑
作者：换日线°
这篇文章主要介绍了vue如何移动到指定位置(scrollIntoView)亲测避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue移动到指定位置(scrollIntoView)
用(scrollIntoView)来实现移动到指定位置建议不要放在(mt-loadmore)里使用，不然头部会被挤上去----亲测
- html
<div id="pronbit" ref="pronbit">需要移动到的位置</div>
- js
//选中id
document.getElementById(e).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
// 选中ref
this.$refs.pronbit.scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
//要是放在mounted()里执行使用
this.$refs.pronbit.scrollIntoView();//不然只执行一次刷新了也一样
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);上面介绍使用方法 下面请看效果图
<template>
<div id="app">
<!-- 轮播 -->
<div class="planting">
<cube-slide ref="slide" :data="items" @change="changePage">
<cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
<img @click="imgus('aa'+index)" :src="item.image">
</cube-slide-item>
</cube-slide>
</div>
<!-- 轮播 -->
<img style="width: 100%;float: left;" v-for="(item,index) in items" :id="'aa'+index" :src="item.image">
<img style="width: 100%;float: left;" v-for="(item,index) in 3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1076778629,484203681&fm=11&gp=0.jpg">
</div>
</template>
<script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//弹窗
export default {
props: {
msg: String
},
data() {
return {
items: [
{
url: '',
image: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg'
},
{
url: '',
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg'
},
{
url: '',
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg'
}
],
}
},
mounted(){
},
methods: {
//滚动指定位置
imgus:function(e){
document.getElementById(e).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
},
// 轮播
changePage(current) {
console.log('当前轮播图序号为:' + current)
},
clickHandler(item, index) {
console.log(item, index)
},
},
}
</script>
<style>
.cube-slide-item img{
width: 100%;
height: 100%;
}
.planting{
width: 100%;
height: 6rem;
overflow: hidden;
}
.cube-slide-dots{
position:absolute;
bottom: 0.3rem;
}
.cube-slide-dots>span{
height: 2px;
}
</style>引入了滴滴组件的可以直接使用（建议参考）
scrollIntoView导致元素偏移问题
element.scrollIntoView（）
需要默认为true element.scrollIntoView（）等同于element.scrollIntoView(true)
| (默认值) | 描述 |
|---|---|
| true | 元素的顶部将对齐到可滚动祖先的可见区域的顶部 |
| false | 元素的底部将与可滚动祖先的可见区域的底部对齐。 |
但是
scrollIntoView当元素超出可视区域的时候就会出现元素偏移的情况
解决办法有两个
1.修改元素
`height：100%;overflow:auto`
2.
var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop;这样会默认跑到顶端但是会出现一个问题使得元素的一半出不来
3.最好
var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop- Id.offsetHeight;总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。