Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

js 监听页面滚动

作者:整整ー世♂陰霾そ   发布日期:2026-02-02   浏览:47

// 监听页面滚动事件的示例代码

// 使用 window.addEventListener 方法来监听 scroll 事件
window.addEventListener('scroll', function() {
    // 获取当前页面垂直方向的滚动距离
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 打印滚动距离到控制台
    console.log('当前页面滚动距离: ' + scrollTop + 'px');

    // 可以在这里添加更多逻辑,例如当滚动到一定位置时触发某些操作
    if (scrollTop > 100) {
        console.log('已经滚动超过 100px');
    }
});

// 解释说明:
// 1. `window.addEventListener('scroll', function() {...})`:监听窗口的滚动事件。
// 2. `window.pageYOffset || document.documentElement.scrollTop`:获取页面在垂直方向上的滚动距离。
// 3. `console.log`:将滚动距离输出到控制台,方便调试。
// 4. 可以根据滚动距离执行不同的操作,比如显示隐藏的导航栏、加载更多内容等。

上一篇:js sha1

下一篇:js 对象解构

大家都在看

js 数组对象排序

js 对象数组排序

js 数组删掉第一个值

js fill

js 数组连接

js json数组

js 数组复制

js 复制数组

js 数组拷贝

js 数组对象合并

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站