Vue如何實現監聽某個元素滾動

這篇文章主要介紹了Vue如何實現監聽某個元素滾動的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue如何實現監聽某個元素滾動文章都會有所收獲，下面我們一起來看看吧。

監聽某個元素滾動,親測有效

Vue 開發，有時候只需要監聽某個元素是否滾動就行了，不需要去監聽整個頁面。

Vue 有自帶的 @scroll 但是并沒有什么用，給某個滾動元素加上，滾動該元素并不會調用，加上 CSS 支持滾動樣式也一樣。

怎么監聽呢？通過 addEventListener 與 @mousewheel 配合實現

• addEventListener: 增加的是拖拽滾動條也能監聽到滾動

• @mousewheel：添加的是非拖拽滾動條滾動，比如在元素上鼠標或者觸摸板滾動。

<template>
  <!-- 滾動視圖 -->
  <div class="scrollview" ref="scrollview" @mousewheel="scrollChange">
    <!-- 內容區域 -->
    <div class="content"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    // 獲取指定元素
    const scrollview = this.$refs['scrollview']
    // 添加滾動監聽，該滾動監聽了拖拽滾動條
    // 尾部的 true 最好加上，我這邊測試沒加 true ，拖拽滾動條無法監聽到滾動，加上則可以監聽到拖拽滾動條滾動回調
    scrollview.addEventListener('scroll', this.scrollChange, true)
  },
  // beforeDestroy 與 destroyed 里面移除都行
  beforeDestroy () {
    // 獲取指定元素
    const scrollview = this.$refs['scrollview']
    // 移除監聽
    scrollview.removeEventListener('scroll', this.scrollChange, true)
  },
  methods: {
    // 滾動監聽
    scrollChange () {
      console.log('滾動中')
    }
  }
}
</script>

<style scoped>
.scrollview {
  height: 100px;
  overflow-y: auto;
  background-color: yellow;
}
.content {
  height: 500px;
  background-color: red;
}
</style>

監聽dom元素滾動到了可視區？

場景：當某個元素滾動到可視區時，為其添加動畫樣式(animate.css)。

common/utils.js

export const isElementNotInViewport = function(el) {
    if (el) {
        let rect = el.getBoundingClientRect();
        return (
            rect.top >=
                (window.innerHeight || document.documentElement.clientHeight) ||
            rect.bottom <= 0
        );
    }
};

在組件內的使用

import { isElementNotInViewport } from "common/utils";
export default {
   ...
  data() {
    return {
      header_Animate: false
    }
  },
  mounted() {
    // 監聽滾動事件
    window.addEventListener("scroll", this.scrollToTop);
  },
  beforeRouteLeave(to, form, next) {
    // 離開路由移除滾動事件
    window.removeEventListener('scroll',this.scrollToTop);
    next();
  },
  methods: {
    // 滾動事件
    scrollToTop() {
      !isElementNotInViewport(this.$refs.header) ? this.header_Animate = true: '';
    }
  }
}

<template>
  <div 
    ref="header" 
    class="animate__animated" 
    :class="{animate__slideInLeft:header_Animate}">
  </div>
</template>

這樣就可以控制當dom元素滾動到可視區的時候，給他添加動畫樣式了。

關于“Vue如何實現監聽某個元素滾動”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue如何實現監聽某個元素滾動”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。