快捷導(dǎo)航

Vue滾動(dòng)到指定位置的多種方式示例詳解

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

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

腳本之家推薦閱讀：

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

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

解決Vue頁面固定滾動(dòng)位置的處理辦法

需求：

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

方法一：錨點(diǎn)

錨點(diǎn)通過在元素上設(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為錨鏈接，并不會(huì)跳轉(zhuǎn)到新的鏈接，只會(huì)在當(dāng)前鏈接里面改變錨鏈。
href表示重定向，得到完整的url，頁面跳轉(zhuǎn)到新的頁面。

方法二：scrollTop

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

由于此處父元素距離頂部也有一定的高度，所以滾動(dòng)距離需要先減去父元素的offsetTop，才是正確的滾動(dòng)高度。

方法三：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

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

behavior 定義動(dòng)畫過渡效果：“auto”、 “smooth”

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

在這里插入圖片描述