如何使用JS和jQuery监听页面滚动事件并在滚动到特定区域时执行指定操作？-html教程-PHP中文网

如何使用JS和jQuery监听页面滚动事件并在滚动到特定区域时执行指定操作？

DDD

发布： 2025-03-01 15:56:10

原创

235人浏览过

如何使用JS和jQuery监听页面滚动事件并在滚动到特定区域时执行指定操作？

利用js和jquery实现页面滚动事件监听及特定区域触发操作

许多网站都运用页面滚动触发特定交互效果，例如导航栏样式变化。本文将详细介绍如何使用JavaScript和jQuery实现此功能。假设需求是在页面滚动到200vh时，在控制台打印“test”。我们将提供基于原生JavaScript和jQuery的两种解决方案。

核心方法是监听window对象的scroll事件。该事件在页面滚动时触发，事件处理函数中获取当前滚动距离window.scrollY，并与目标滚动距离进行比较。为了避免重复触发，我们使用布尔变量once，确保操作只执行一次。

首先，需将vh单位转换为像素单位，以便与window.scrollY精确比较。代码中vh = Math.floor(window.innerHeight / 100)计算出视口高度的1%的像素值。

jQuery方案：

// vh转像素
const vh = Math.floor(window.innerHeight / 100);
let once = false;

$(window).on('scroll', function() {
    if (once) {
        return;
    }

    if (window.scrollY >= vh * 200) {
        once = true;
        console.log("test"); //  此处替换为实际操作代码
    }
});

登录后复制

这段jQuery代码使用$(window).on('scroll', ...)将scroll事件绑定到窗口对象。滚动事件触发时，代码检查window.scrollY是否大于等于200vh（已转换为像素）。如果条件满足且once为false，则执行console.log("test")，并设置once为true，防止重复执行。

原生JavaScript方案：

// vh转像素
const vh = Math.floor(window.innerHeight / 100);
let once = false;

window.addEventListener('scroll', function() {
    if (once) {
        return;
    }
    if (window.scrollY >= vh * 200) {
        once = true;
        console.log("test"); // 此处替换为实际操作代码
    }
});

登录后复制

这段原生JavaScript代码使用window.addEventListener('scroll', ...)监听scroll事件。其余逻辑与jQuery版本相同，只是使用了原生JavaScript的事件监听机制。console.log("test")仅为示例，实际应用中应替换为所需执行的代码，例如修改导航栏样式等。

以上就是如何使用JS和jQuery监听页面滚动事件并在滚动到特定区域时执行指定操作？的详细内容，更多请关注php中文网其它相关文章！