vue如何移動到指定位置(scrollIntoView)親測避坑
更新時間：2023年05月19日 09:47:52 作者：換日線°
這篇文章主要介紹了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()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
//禁止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 | 元素的頂部將對齊到可滾動祖先的可見區(qū)域的頂部 |
| false | 元素的底部將與可滾動祖先的可見區(qū)域的底部對齊。 |
但是
scrollIntoView當元素超出可視區(qū)域的時候就會出現元素偏移的情況
解決辦法有兩個
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;總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
大家都知道,vue是具有單向數據流的傳遞特性,下面這篇文章主要給大家介紹了關于Vue3中如何修改父組件傳遞到子組件中值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
ue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧2018-02-02
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個文件/文件夾，代碼很簡單，對vue3拖拽上傳功能感興趣的朋友一起看看吧2022-10-10
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章通過實例代碼給大家介紹了Vue加載組件、動態(tài)加載組件的幾種方式，需要的朋友參考下吧2018-08-08
淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
地圖多點標注其實是個非常簡單的問題,這篇文章主要給大家介紹了關于vue實現高德地圖添加多個點標記的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue3造輪子之打包構建配置二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
小編接到查看影像的功能需求，根據需求，多個組件需要用到查看影像的功能，所以考慮做一個公用組件，通過組件傳值的方法將查看影像文件的入參傳過去。下面小編通過實例代碼給大家分享vue項目中實現圖片預覽的公用組件功能，需要的朋友參考下吧2018-10-10
vue項目中使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10