原生JavaScript实现页面滚动监听的方法步骤
作者：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页面滚动监听的资料请关注脚本之家其它相关文章！