原生JavaScript实现页面滚动监听：从入门到精通

元素滚动到某个位置

要实现监听某个元素到达指定位置的功能，可以结合多种技术，包括JavaScript、Vue.js、MutationObserver等。以下是详细的实现步骤和方法：

1.使用JavaScript监听滚动事件

JavaScript提供了多种方式来监听滚动事件，并判断元素是否到达指定位置。以下是一个基本的实现示例：

ini 复制代码

<template>
  <div ref="targetElement" class="target_element">
    目标元素
  </div>
</template>

// 获取需要监听的元素
const targetElement = document.querySelector('.target_element');

// 定义滚动事件处理函数
function handleScroll() {
    // 获取目标元素相对于视口的位置
    const rect = targetElement.getBoundingClientRect();
    
    // 判断元素是否到达指定位置（例如，顶部）
    if (rect.top <= 0) {
        console.log('元素已到达顶部');
        // 可以在这里添加其他逻辑，比如固定元素位置
        targetElement.style.position = 'fixed';
        targetElement.style.top = '0';
    } else {
        // 恢复元素的原始样式
        targetElement.style.position = '';
        targetElement.style.top = '';
    }
}

// 添加滚动事件监听器
window.addEventListener('scroll', handleScroll);

// 移除事件监听器（在组件销毁时）
window.removeEventListener('scroll', handleScroll);

2.使用Vue.js监听滚动事件

在Vue.js中，可以通过生命周期钩子和事件监听器来实现类似的功能。以下是一个Vue组件的示例：

xml 复制代码

<template>
  <div ref="targetElement" class="target_element">
    目标元素
  </div>
</template>>

<script>
export default {
  mounted() {
    // 确保DOM元素已渲染完毕
    this.$nextTick(() => {
      // 添加滚动事件监听器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 获取目标元素相对于视口的位置
      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 {
        // 恢复元素的原始样式
        this.$refs.targetElement.style.position = '';
        this.$refs.targetElement.style.top = '';
      }
    }
  }
};
</script>

3.使用MutationObserver监听元素位置变化

MutationObserver可以监听DOM元素的属性变化，包括位置变化。以下是一个使用MutationObserver的示例：

ini 复制代码

<template>
  <div ref="targetElement" class="target_element">
    目标元素
  </div>
</template>

// 获取需要监听的元素
const targetElement = document.querySelector('.target_element');

// 创建一个MutationObserver实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 获取目标元素相对于视口的位置
      const rect = targetElement.getBoundingClientRect();
      
      // 判断元素是否到达指定位置（例如，顶部）
      if (rect.top <= 0) {
        console.log('元素已到达顶部');
        // 可以在这里添加其他逻辑，比如固定元素位置
        targetElement.style.position = 'fixed';
        targetElement.style.top = '0';
      } else {
        // 恢复元素的原始样式
        targetElement.style.position = '';
        targetElement.style.top = '';
      }
    }
  }
});

// 配置观察选项
const config = { attributes: true, attributeFilter: ['style'] };

// 开始观察目标元素
observer.observe(targetElement, config);

// 停止观察目标元素（在组件销毁时）
observer.disconnect();

元素滚进入视口

1.使用JavaScript监听滚动事件

javascript 复制代码

<template>
  <div ref="targetElement" class="target_element">
    目标元素
  </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监听滚动事件

xml 复制代码

<template>
  <div ref="targetElement" class="target-element">
    目标元素
  </div>
</template>

<script>
export default {
  mounted() {
    // 确保DOM元素已渲染完毕
    this.$nextTick(() => {
      // 添加滚动事件监听器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 获取目标元素相对于视口的位置
      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 是一种现代且高效的方法，用于检测元素是否进入视口。它允许开发者定义一个观察器对象，通过异步方式监听目标元素与视口的交集变化。

实现步骤：

创建Intersection Observer实例：定义根元素（通常是视口）和观察选项（如根边距、阈值等）。
添加观察目标：将目标元素传递给观察器，并设置回调函数。
触发回调：当目标元素进入或离开视口时，回调函数会被调用。

xml 复制代码

<template>
  <div ref="targetElement" class="target-element">
    目标元素
  </div>
</template>

<script>
export default {
  mounted() {
    // 确保DOM元素已渲染完毕
    this.$nextTick(() => {
      // 添加滚动事件监听器
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
     const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                //进入视口了
            } else {
               //没进入
            }
            });
        }, 
       {
            root: null, // 使用默认视口
            threshold: 0.1 // 当目标元素至少10%进入视口时触发 取值0-1
        });

    observer.observe(document.querySelector('.target-element'));

    }
  }
};
</script>

graph TD Start --> Stop

总结

以上方法展示了如何使用JavaScript、Vue.js和MutationObserver来监听某个元素到达指定位置的功能。根据具体需求和技术栈选择合适的方法。在实际应用中，可能还需要考虑性能优化，比如使用节流（throttle）或防抖（debounce）技术来减少滚动事件处理函数的调用频率。