脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript页面滚动监听

原生JavaScript实现页面滚动监听的方法步骤

 更新时间：2025年03月18日 10:31:25   作者：destinying  
滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的,本文给大家介绍了原生JavaScript实现页面滚动监听的方法步骤,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

元素滚动到某个位置

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

1.使用JavaScript监听滚动事件

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

<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组件的示例：

<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的示例：

<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监听滚动事件

<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监听滚动事件

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

Start——>Stop

总结

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

以上就是原生JavaScript实现页面滚动监听的方法步骤的详细内容，更多关于JavaScript页面滚动监听的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • javascript实现小型区块链功能

    javascript实现小型区块链功能

    这篇文章主要介绍了javascript实现小型区块链功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Javascript的this用法

    Javascript的this用法

    本文主要介绍了Javascript的this用法，具有很好的参考价值，有需要了解的朋友可以看看
    2017-01-01
  • swiper4实现移动端导航栏tab滑动切换

    swiper4实现移动端导航栏tab滑动切换

    这篇文章主要为大家详细介绍了swiper4实现移动端导航栏tab滑动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS获取下拉框显示值和判断单选按钮的方法

    JS获取下拉框显示值和判断单选按钮的方法

    这篇文章主要介绍了JS获取下拉框显示值和判断单选按钮的方法,实例分析了javascript针对html下拉框及单选按钮的相关操作技巧,需要的朋友可以参考下
    2015-07-07
  • JavaScript基础进阶之数组方法总结(推荐)

    JavaScript基础进阶之数组方法总结(推荐)

    下面小编就为大家带来一篇JavaScript基础进阶之数组方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js实现抽奖的两种方法

    js实现抽奖的两种方法

    这篇文章主要为大家详细介绍了js实现抽奖的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS简单设置下拉选择框默认值的方法

    JS简单设置下拉选择框默认值的方法

    这篇文章主要介绍了JS简单设置下拉选择框默认值的方法,涉及javascript针对页面元素的遍历、查找及设置技巧,需要的朋友可以参考下
    2016-08-08
  • JS实现的四级密码强度检测功能示例

    JS实现的四级密码强度检测功能示例

    这篇文章主要介绍了JS实现的四级密码强度检测功能,具有实时检测输入密码强度的功能,涉及javascript针对字符串的正则判定相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • js通栏展示效果实现代码

    js通栏展示效果实现代码

    百度有啊通栏展示大家并不陌生吧，下面与大家分享下具体的实现js代码，感兴趣的朋友可以参考下哈
    2013-05-05
  • JS设置cookie、读取cookie、删除cookie

    JS设置cookie、读取cookie、删除cookie

    Js操作Cookie总结（设置，读取，删除），工作中经常会用到的哦！下面是详细代码，如有错误，请留言指正！
    2015-04-04

最新评论