Vue滾動到指定位置的多種方式示例詳解

更新時間：2023年08月16日 09:19:19 作者：qsya

當(dāng)容器有滾動條時,有時需要將指定的內(nèi)容自動滾動到可視區(qū)域,怎么實現(xiàn)呢,下面小編給大家?guī)砹硕喾N方法實現(xiàn)Vue滾動到指定位置,感興趣的朋友跟隨小編一起看看吧

腳本之家推薦閱讀：

vue如何移動到指定位置(scrollIntoView)親測避坑

vue實現(xiàn)滾動條到頂部或者到指定位置

解決Vue頁面固定滾動位置的處理辦法

需求：

當(dāng)容器有滾動條時，有時需要將指定的內(nèi)容自動滾動到可視區(qū)域。

方法一：錨點

錨點通過在元素上設(shè)置id，然后用a標(biāo)簽的href="#id"屬性跳轉(zhuǎn)到指定位置。也可以通過js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 來跳轉(zhuǎn)。

在這里插入圖片描述

//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的區(qū)別：

hash為錨鏈接，并不會跳轉(zhuǎn)到新的鏈接，只會在當(dāng)前鏈接里面改變錨鏈。
href表示重定向，得到完整的url，頁面跳轉(zhuǎn)到新的頁面。

方法二：scrollTop

先計算指定dom距離頂部的高度offsetTop，再設(shè)置父元素的滾動距離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

簡單粗暴，將指定元素滾動到可視區(qū)域頂部、底部或中間：

behavior 定義動畫過渡效果：“auto”、 “smooth”

//頂部
document.getElementById('li60').scrollIntoView();
//底部
document.getElementById('li60').scrollIntoView(false);
//中間
document.getElementById('li60').scrollIntoView({ behavior: "smooth", block: 'center' });

在這里插入圖片描述