如何用JavaScript或jQuery监听页面滚动到指定位置并执行一次特定操作？-html教程-PHP中文网

如何用JavaScript或jQuery监听页面滚动到指定位置并执行一次特定操作？

心靈之曲

发布： 2025-03-01 15:54:23

原创

218人浏览过

如何用JavaScript或jQuery监听页面滚动到指定位置并执行一次特定操作？

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变量确保了事件的单次执行，避免了重复操作。

以上就是如何用JavaScript或jQuery监听页面滚动到指定位置并执行一次特定操作？的详细内容，更多请关注php中文网其它相关文章！