快捷導(dǎo)航

Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑

更新時(shí)間：2022年09月01日 15:04:31 作者：KWMax

這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue滾動(dòng)頁面到指定位置

在Vue中，有三種方式可以實(shí)現(xiàn)H5頁面滑動(dòng)至指定位置

方法1

//先獲取目標(biāo)位置距離
mounted() {
? this.$nextTick(() => {
? ? ?setTimeout(() => {
? ? ? ? let targetbox= document.getElementById('targetbox');
? ? ? ? this.target= targetbox.offsetTop; ? ? ? ?
? ?})
? })
}
//再滑動(dòng)指定距離
document.body.scrollTop = this.target;

方法2

this.$nextTick(() => {
? ? ?this.$refs.DOM.scrollTo(0,200);
})

方法3

document.getElementById("target").scrollIntoView();

避坑指南

方法1，滑動(dòng)至的元素不能是display:none，存在兼容問題，親測(cè)在部分ios機(jī)子上document.body.scrollTop滑動(dòng)無效。

方法2，未親測(cè)過，但在this.$nextTick(()里執(zhí)行滑動(dòng)，感覺有點(diǎn)麻煩。

方法3，親測(cè)可用，ios和android都可。只是要注意，如果頁面有監(jiān)聽scroll事件，scrollIntoView也會(huì)觸發(fā)scroll事件的。

滾動(dòng)頁面到一定距離后固定

1.id名為testNavBar的盒子與:class=’{ fixedNavbar: isfixTab }'的盒子可以是包含關(guān)系也可以是并列關(guān)系

?<div id='testNavBar'></div>
? ? ? <div class="container " ?:class='{ fixedNavbar: isfixTab ?}'>
? ?</div>

或者

<div id='testNavBar'>
?? ?<div :class='{ fixedNavbar: isfixTab }'>這是導(dǎo)航</div>
</div>

2.fixedNavbar是類名

.fixedNavbar {
? ? ? background-color: #f3f3f3;
? ? ? position: fixed;
? ? ? width: 100%;
? ? ? z-index: 2032;
? ? ? top: 0;
? ? ? left: 0;
? ? ? padding-bottom: 10px;
? ? }

3.isfixTab 是控制是否加類名

?data() {
? ? return {
? ? ? isnavshow: false,
? ? ? cateList:[],
? ? ? cateInfo:[],
? ? ? config_list:{},
? ? ? isfixTab:false
? ? }
? },

4.在mounted中監(jiān)聽頁面滾動(dòng)事件,并調(diào)用handleTabFix() 方法

? // 監(jiān)聽頁面滾動(dòng)
? ? mounted () {
? ? ? ? window.addEventListener('scroll', this.handleTabFix, true)
? ? },
? ? //離開當(dāng)前組件前一定要清除滾動(dòng)監(jiān)聽，否則進(jìn)入其他路由會(huì)報(bào)錯(cuò)
? ? beforeRouteLeave (to, from, next) {
? ? ? window.removeEventListener('scroll', this.handleTabFix, true)
? ? ? next()
? ? },

5.聲明一個(gè)方法handleTabFix()

?// 先分別獲得id為testNavBar的元素距離頂部的距離和頁面滾動(dòng)的距離
?? ? ? ?// 比較他們的大小來確定是否添加fixedNavbar樣式
? ? handleTabFix() {
? ? ? var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
? ? ? var offsetTop = document.querySelector('#testNavBar').offsetTop
? ? ? scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
? ? }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: