快捷導(dǎo)航

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

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

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

元素滾動(dòng)到某個(gè)位置

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

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

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

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

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

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

<template>
  <div ref="targetElement" class="target_element">
    目標(biāo)元素
  </div>
</template>>
?
<script>
export default {
  mounted() {
    // 確保DOM元素已渲染完畢
    this.$nextTick(() => {
      // 添加滾動(dòng)事件監(jiān)聽器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件監(jiān)聽器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 獲取目標(biāo)元素相對(duì)于視口的位置
      const rect = this.$refs.targetElement.getBoundingClientRect();
      
      // 判斷元素是否到達(dá)指定位置（例如，頂部）
      if (rect.top <= 0) {
        console.log('元素已到達(dá)頂部');
        // 可以在這里添加其他邏輯，比如固定元素位置
        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元素的屬性變化，包括位置變化。以下是一個(gè)使用MutationObserver的示例：

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

元素滾進(jìn)入視口

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

<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) {
           //進(jìn)入視口
        } else {
           //沒有進(jìn)入
        }
    });
});
?

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

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

3.用Intersection Observer API

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

實(shí)現(xiàn)步驟：

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

<template>
  <div ref="targetElement" class="target-element">
    目標(biāo)元素
  </div>
</template>
?
<script>
export default {
  mounted() {
    // 確保DOM元素已渲染完畢
    this.$nextTick(() => {
      // 添加滾動(dòng)事件監(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) {
                //進(jìn)入視口了
            } else {
               //沒進(jìn)入
            }
            });
        }, 
       {
            root: null, // 使用默認(rèn)視口
            threshold: 0.1 // 當(dāng)目標(biāo)元素至少10%進(jìn)入視口時(shí)觸發(fā) 取值0-1
        });
?
    observer.observe(document.querySelector('.target-element'));
?
    }
  }
};
</script>
?

Start——>Stop

總結(jié)

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

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

您可能感興趣的文章: