vue 局部回到顶部_vue中回到顶部
1. 回到頂部,使用 scrollIntoView 方法:
Element.scrollIntoView方法滾動(dòng)當(dāng)前元素,進(jìn)入瀏覽器的可見區(qū)域
該方法可以接受一個(gè)布爾值作為參數(shù)。如果為true,表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對(duì)齊(前提是當(dāng)前區(qū)域可滾動(dòng));如果為false,表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對(duì)齊(前提是當(dāng)前區(qū)域可滾動(dòng))。如果沒有提供該參數(shù),默認(rèn)為true
使用該方法的原理與使用錨點(diǎn)的原理類似,在頁面最上方設(shè)置目標(biāo)元素,當(dāng)頁面滾動(dòng)時(shí),目標(biāo)元素被滾動(dòng)到頁面區(qū)域以外,點(diǎn)擊回到頂部按鈕,使目標(biāo)元素重新回到原來位置,則達(dá)到預(yù)期效果。
回到頂部
target.scrollIntoView();
}
2. vue 中滾動(dòng)條滾到一定距離后,顯示『回到頂部』按鈕;
(1)監(jiān)聽滾動(dòng)事件
利用VUE寫一個(gè)在控制臺(tái)打印當(dāng)前的scrollTop。首先,在 mounted 鉤子中給window添加一個(gè)滾動(dòng)滾動(dòng)監(jiān)聽事件:
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
然后在方法中,添加這個(gè) scrollToTop 方法:
scrollToTop() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
console.log(scrollTop)
}
控制臺(tái)打印結(jié)果:
(2) 監(jiān)聽回到頂部按鈕距瀏覽器頂部的距離,滾動(dòng)的距離如果大于瀏覽器高度時(shí),設(shè)置 toTop 為true,否則就是false;
scrollToTop(el) {
let topBtn = document.getElementById('to-top-btn');
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let browserHeight = window.outerHeight;
if (scrollTop > browserHeight) {
topBtn.style.display = 'block';
} else {
topBtn.style.display = 'none';
}
}
(3)?離開該頁面需要移除這個(gè)監(jiān)聽的事件,不然會(huì)報(bào)錯(cuò);
destroyed () {
window.removeEventListener('scroll', this.scrollToTop);
}
總結(jié)
以上是生活随笔為你收集整理的vue 局部回到顶部_vue中回到顶部的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 记录成功通过CSP接口获取Ukey的X5
- 下一篇: 自主搭建邮件服务器