javascript页面滚动监听：精准触发一次性事件
许多网页应用需要根据页面滚动位置动态调整元素或执行特定操作。例如，滚动到特定区域时显示/隐藏元素，或加载更多内容。本文演示如何使用JavaScript和jQuery监听页面滚动到指定位置（例如200vh），并仅执行一次特定操作。
假设页面包含一个高度为1000vh的div，目标是在滚动到200vh时触发事件。由于vh是视口高度百分比，需先将vh转换为像素值。
解决方案利用window.scrollY获取页面垂直滚动距离（单位像素）。代码首先计算1vh对应的像素值：const vh = Math.floor(window.innerHeight / 100);。然后，使用window.addEventListener（原生JavaScript）或$(window).on('scroll', function(){})（jQuery）监听滚动事件。
关键在于判断滚动距离是否达到目标位置：window.scrollY >= vh * 200。 当滚动距离大于等于200vh（即200 * vh像素）时，执行代码块中的操作。为了防止重复触发，使用once变量确保代码只执行一次。
立即学习“Java免费学习笔记（深入）”；
以下是jQuery和原生JavaScript的代码示例：
// vh转像素
const vh = Math.floor(window.innerHeight / 100);
let once = false;
// jQuery
$(window).on('scroll', function() {
if (once) return;
if (window.scrollY >= vh * 200) {
once = true;
console.log("test"); // 在此处添加您的操作
}
});
// JavaScript
window.addEventListener('scroll', function() {
if (once) return;
if (window.scrollY >= vh * 200) {
once = true;
console.log("test"); // 在此处添加您的操作
}
});
这段代码高效监听页面滚动，并在滚动到指定位置时精确触发一次操作。 您可以替换console.log("test")为任何JavaScript代码。 once变量确保了事件的单次执行，避免了重复操作。
