快捷導(dǎo)航

原生JavaScript實現(xiàn)頁面滾動監(jiān)聽的方法步驟

更新時間：2025年03月18日 10:31:25 作者：destinying

滾動監(jiān)聽事件一般網(wǎng)頁中的返回頂部按鈕都是通過滾動監(jiān)聽事件來實現(xiàn)的,本文給大家介紹了原生JavaScript實現(xiàn)頁面滾動監(jiān)聽的方法步驟,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

元素滾動到某個位置

要實現(xiàn)監(jiān)聽某個元素到達指定位置的功能，可以結(jié)合多種技術(shù)，包括JavaScript、Vue.js、MutationObserver等。以下是詳細(xì)的實現(xiàn)步驟和方法：

1.使用JavaScript監(jiān)聽滾動事件

JavaScript提供了多種方式來監(jiān)聽滾動事件，并判斷元素是否到達指定位置。以下是一個基本的實現(xiàn)示例：

<template>
  <div ref="targetElement" class="target_element">
    目標(biāo)元素
  </div>
</template>
?
// 獲取需要監(jiān)聽的元素
const targetElement = document.querySelector('.target_element');
?
// 定義滾動事件處理函數(shù)
function handleScroll() {
    // 獲取目標(biāo)元素相對于視口的位置
    const rect = targetElement.getBoundingClientRect();
    
    // 判斷元素是否到達指定位置（例如，頂部）
    if (rect.top <= 0) {
        console.log('元素已到達頂部');
        // 可以在這里添加其他邏輯，比如固定元素位置
        targetElement.style.position = 'fixed';
        targetElement.style.top = '0';
    } else {
        // 恢復(fù)元素的原始樣式
        targetElement.style.position = '';
        targetElement.style.top = '';
    }
}
?
// 添加滾動事件監(jiān)聽器
window.addEventListener('scroll', handleScroll);
?
// 移除事件監(jiān)聽器（在組件銷毀時）
window.removeEventListener('scroll', handleScroll);

2.使用Vue.js監(jiān)聽滾動事件

在Vue.js中，可以通過生命周期鉤子和事件監(jiān)聽器來實現(xiàn)類似的功能。以下是一個Vue組件的示例：

<template>
  <div ref="targetElement" class="target_element">
    目標(biāo)元素
  </div>
</template>>
?
<script>
export default {
  mounted() {
    // 確保DOM元素已渲染完畢
    this.$nextTick(() => {
      // 添加滾動事件監(jiān)聽器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件監(jiān)聽器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 獲取目標(biāo)元素相對于視口的位置
      const rect = this.$refs.targetElement.getBoundingClientRect();
      
      // 判斷元素是否到達指定位置（例如，頂部）
      if (rect.top <= 0) {
        console.log('元素已到達頂部');
        // 可以在這里添加其他邏輯，比如固定元素位置
        this.$refs.targetElement.style.position = 'fixed';
        this.$refs.targetElement.style.top = '0';
      } else {
        // 恢復(fù)元素的原始樣式
        this.$refs.targetElement.style.position = '';
        this.$refs.targetElement.style.top = '';
      }
    }
  }
};
</script>
?

3.使用MutationObserver監(jiān)聽元素位置變化

MutationObserver可以監(jiān)聽DOM元素的屬性變化，包括位置變化。以下是一個使用MutationObserver的示例：

<template>
  <div ref="targetElement" class="target_element">
    目標(biāo)元素
  </div>
</template>
?
// 獲取需要監(jiān)聽的元素
const targetElement = document.querySelector('.target_element');
?
// 創(chuàng)建一個MutationObserver實例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 獲取目標(biāo)元素相對于視口的位置
      const rect = targetElement.getBoundingClientRect();
      
      // 判斷元素是否到達指定位置（例如，頂部）
      if (rect.top <= 0) {
        console.log('元素已到達頂部');
        // 可以在這里添加其他邏輯，比如固定元素位置
        targetElement.style.position = 'fixed';
        targetElement.style.top = '0';
      } else {
        // 恢復(fù)元素的原始樣式
        targetElement.style.position = '';
        targetElement.style.top = '';
      }
    }
  }
});
?
// 配置觀察選項
const config = { attributes: true, attributeFilter: ['style'] };
?
// 開始觀察目標(biāo)元素
observer.observe(targetElement, config);
?
// 停止觀察目標(biāo)元素（在組件銷毀時）
observer.disconnect();

元素滾進入視口

1.使用JavaScript監(jiān)聽滾動事件

<template>
  <div ref="targetElement" class="target_element">
    目標(biāo)元素
  </div>
</template>
// JavaScript
window.addEventListener('scroll', () => {
    const elements = document.querySelector('.target_element');
    elements.forEach(element => {
        const rect = element.getBoundingClientRect();
        if (rect.top  >= 0 && rect.bottom <= window.innerHeight) {
           //進入視口
        } else {
           //沒有進入
        }
    });
});
?

2.使用Vue.js監(jiān)聽滾動事件

<template>
  <div ref="targetElement" class="target-element">
    目標(biāo)元素
  </div>
</template>
?
<script>
export default {
  mounted() {
    // 確保DOM元素已渲染完畢
    this.$nextTick(() => {
      // 添加滾動事件監(jiān)聽器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件監(jiān)聽器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 獲取目標(biāo)元素相對于視口的位置
      const rect = this.$refs.targetElement.getBoundingClientRect();
      
      // 判斷元素是否進入視口
      if (rect.top  >= 0 && rect.bottom <= window.innerHeight) {
            console.log('Element is in viewport');
       }
    }
  }
};
</script>

3.用Intersection Observer API

Intersection Observer API 是一種現(xiàn)代且高效的方法，用于檢測元素是否進入視口。它允許開發(fā)者定義一個觀察器對象，通過異步方式監(jiān)聽目標(biāo)元素與視口的交集變化。

實現(xiàn)步驟：

創(chuàng)建Intersection Observer實例：定義根元素（通常是視口）和觀察選項（如根邊距、閾值等）。
添加觀察目標(biāo)：將目標(biāo)元素傳遞給觀察器，并設(shè)置回調(diào)函數(shù)。
觸發(fā)回調(diào)：當(dāng)目標(biāo)元素進入或離開視口時，回調(diào)函數(shù)會被調(diào)用。

<template>
  <div ref="targetElement" class="target-element">
    目標(biāo)元素
  </div>
</template>
?
<script>
export default {
  mounted() {
    // 確保DOM元素已渲染完畢
    this.$nextTick(() => {
      // 添加滾動事件監(jiān)聽器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件監(jiān)聽器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
     const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                //進入視口了
            } else {
               //沒進入
            }
            });
        }, 
       {
            root: null, // 使用默認(rèn)視口
            threshold: 0.1 // 當(dāng)目標(biāo)元素至少10%進入視口時觸發(fā) 取值0-1
        });
?
    observer.observe(document.querySelector('.target-element'));
?
    }
  }
};
</script>
?

Start——>Stop

總結(jié)

以上方法展示了如何使用JavaScript、Vue.js和MutationObserver來監(jiān)聽某個元素到達指定位置的功能。根據(jù)具體需求和技術(shù)棧選擇合適的方法。在實際應(yīng)用中，可能還需要考慮性能優(yōu)化，比如使用節(jié)流（throttle）或防抖（debounce）技術(shù)來減少滾動事件處理函數(shù)的調(diào)用頻率。

以上就是原生JavaScript實現(xiàn)頁面滾動監(jiān)聽的方法步驟的詳細(xì)內(nèi)容，更多關(guān)于JavaScript頁面滾動監(jiān)聽的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: