Vue的Scroll滾動(dòng)事件觸發(fā)方式
更新時(shí)間：2022年04月23日 14:06:18 作者：Daniel·M
這篇文章主要介紹了Vue的Scroll滾動(dòng)事件觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Scroll滾動(dòng)事件觸發(fā)
切記 當(dāng)你需要滾動(dòng)事件觸發(fā) 千萬(wàn)不要加 overflow-y: auto; 一旦加了 就 全是 0
例子
去掉 overflow-y: auto;
如果你需要把這個(gè)頁(yè)面當(dāng)做子組件引入 需要加true 因?yàn)?···· 請(qǐng)看最后一張圖片 如果不加true 不變成捕獲事件 則無(wú)法成功引用
<template> ?? ?<div class="totop"> ?? ??? ?<div class="btnTop" v-if="btnFlag" @click="backTop()"> ?? ??? ??? ?<van-icon name="arrow-up" size="40" color="#CF9B6B" class="imga"/> ?? ??? ?</div> ?? ?</div> </template>
<script>
export default {
?? ?name: "totop",
?? ?data() {
?? ??? ?return {
?? ??? ??? ?btnFlag: false,
?? ??? ?};
?? ?},
?? ?// 利用VUE寫一個(gè)在控制臺(tái)打印當(dāng)前的scrollTop。首先，在 mounted 鉤子中給window添加一個(gè)滾動(dòng)滾動(dòng)監(jiān)聽事件
?? ?mounted() {
?? ??? ?window.addEventListener("scroll", this.scrollToTop,true);
?? ??? ?//如果你需要把這個(gè)頁(yè)面當(dāng)做子組件引入 需要加true 因?yàn)?···· ?請(qǐng)看最后一張圖片
?? ?},
?? ?destroyed() {
?? ??? ?window.removeEventListener("scroll", this.scrollToTop,true);
?? ?},
?? ?methods: {
?? ??? ?// 點(diǎn)擊圖片回到頂部方法，加計(jì)時(shí)器是為了過渡順滑
?? ??? ?backTop() {
?? ??? ??? ?let that = this;
?? ??? ??? ?let timer = setInterval(() => {
?? ??? ??? ??? ?let ispeed = Math.floor(-that.scrollTop / 5);
?? ??? ??? ??? ?document.documentElement.scrollTop = document.body.scrollTop =
?? ??? ??? ??? ??? ??? ?that.scrollTop + ispeed;
?? ??? ??? ??? ?if (that.scrollTop === 0) {
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}
?? ??? ??? ?}, 16);
?? ??? ?},
?? ??? ?// 監(jiān)聽回到頂部按鈕距瀏覽器頂部的距離，滾動(dòng)的距離如果大于瀏覽器高度時(shí)，設(shè)置 btnFlag 為true,否則就是false
?? ??? ?scrollToTop() {
?? ??? ??? ?let that = this;
?? ??? ??? ?let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
?? ??? ??? ?that.scrollTop = scrollTop;
?? ??? ??? ?console.log(scrollTop)
?? ??? ??? ?//為了計(jì)算距離頂部的高度，當(dāng)高度大于50顯示回頂部圖標(biāo)，小于50則隱藏
?? ??? ??? ?if (that.scrollTop > 50) {
?? ??? ??? ??? ?that.btnFlag = true;
?? ??? ??? ?} else {
?? ??? ??? ??? ?that.btnFlag = false;
?? ??? ??? ?}
?? ??? ?},
?? ?},
};
</script><style lang="scss" scoped>
.totop {
?? ?position: fixed;
?? ?right: 40px;
?? ?bottom: 60px;
?? ?width: 50px;
?? ?height: 50px;
?? ?padding: 10px;
?? ?cursor: pointer;
}
.imga {
?? ?position: relative;
?? ?top: -20px;
?? ?left: 15px;
?? ?text-align: center;
?? ?line-height: 50px;
?? ?border: 3px solid #CF9B6B;
?? ?width: 50px;
?? ?height: 50px;
?? ?border-radius: 50%;
}
</style>
監(jiān)聽Scroll事件無(wú)效
1.監(jiān)聽的dom元素設(shè)定高度，子元素的內(nèi)容要超過容器的高度
2.設(shè)定overflow為:auto/scroll，默認(rèn)值為visible，無(wú)法觸發(fā)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中監(jiān)聽路由參數(shù)的變化,給大家介紹了vue中監(jiān)聽路由參數(shù)變化的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題
這篇文章主要介紹了vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢(shì)開始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
這篇文章主要介紹了Vue2.0系列之過濾器的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-03-03
實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家介紹了Vue2 cube-ui時(shí)間選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了vue中使用axios固定url請(qǐng)求前綴的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11