jQuery Mobile 滚屏事件

jQuery Mobile 的「滚屏事件」（Scroll Events）虽然不像 tap / swipe 那么有名，但是在移动端开发里超级实用，尤其是做「滚动加载更多」「吸顶导航」「回到顶部」「视差滚动」「延迟加载图片」等功能时，几乎离不开它们。

下面是 jQuery Mobile 提供的原生滚屏事件 + 2025 年还在维护老项目时的最稳用法（全部基于 1.4.5）：

事件名称	触发时机	是否节流	典型用途	推荐程度
scrollstart	用户开始滚动（手指/鼠标一移动就立刻触发）	无	暂停视频、隐藏键盘、隐藏浮动工具栏	★★★★★
scrollstop	用户停止滚动 ≈300ms 后触发	内置节流	延迟加载图片、加载更多、显示回到顶部按钮	★★★★★
原生 scroll	每滚动一点就触发（频率极高）	无	实时吸顶、视差、进度条、楼层导航	★★★★

一、最稳的写法（2025 年推荐）

// 写一次，全站永久生效（推荐放在 main.js 最下面）
$(document).on({
    // 1. 开始滚动 → 立刻执行（不能等）
    scrollstart: function(e) {
        // 隐藏浮动按钮、搜索框、键盘
        $(".ui-fixed-header").addClass("scrolling");
        $("input:focus").blur();           // 收起键盘
    },

    // 2. 停止滚动 ≈300ms 后执行（jQM 自带节流，非常靠谱）
    scrollstop: function(e) {
        $(".ui-fixed-header").removeClass("scrolling");

        // 经典：滚动到底部加载更多
        var $win   = $(window);
        var $doc   = $(document);
        if ($win.scrollTop() + $win.height() > $doc.height() - 100) {
            loadMoreData();   // 你的加载函数
        }

        // 滚动超过 300px 显示「回到顶部」
        if ($win.scrollTop() > 300) {
            $("#back-to-top").fadeIn();
        } else {
            $("#back-to-top").fadeOut();
        }
    }
});

二、完整实战案例（直接复制就能用）

1. 无限滚动加载更多（最经典需求）

var page = 1, loading = false;

function loadMoreData() {
    if (loading) return;
    loading = true;
    $("#loading").show();

    $.get("api/list?page=" + (++page), function(data) {
        $("#listview").append(data).listview("refresh");
        $("#loading").hide();
        loading = false;
    });
}

$(document).on("scrollstop", function() {
    var scrollTop    = $(window).scrollTop();
    var windowHeight = $(window).height();
    var docHeight    = $(document).height();

    if (scrollTop + windowHeight > docHeight - 200) {
        loadMoreData();
    }
});

2. 吸顶导航条（滚动时固定在顶部）

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s;
}

$(document).on("scrollstart", function() {
    $("div[data-role='header']").addClass("header-fixed");
});
$(document).on("scrollstop", function() {
    // 可选：滚动停止后恢复原位，或保持吸顶
});

3. 回到顶部按钮（平滑返回）

<a href="#" id="back-to-top" data-role="button" data-icon="arrow-u" 
   style="display:none;position:fixed;bottom:20px;right:20px;z-index:999;">
   顶部
</a>

$(document).on("tap", "#back-to-top", function(e) {
    e.preventDefault();
    $("html,body").animate({scrollTop: 0}, 400);
});

$(document).on("scrollstop", function() {
    $(window).scrollTop() > 400 ? $("#back-to-top").fadeIn() : $("#back-to-top").fadeOut();
});

三、如果你觉得 scrollstop 300ms 太慢，可以自己改！

// 把 scrollstop 的等待时间改成 100ms（更灵敏）
$.event.special.scrollstop.latency = 100;

四、和原生 scroll 的对比（2025 年建议）

场景	推荐事件	原因
无限加载、回到顶部	scrollstop	自带 300ms 节流，性能极好
实时吸顶、视差、进度条	原生 scroll + 节流	需要实时位置，用 requestAnimationFrame 节流
暂停视频、隐藏工具栏	scrollstart	必须立刻触发

实时吸顶的高性能写法（如果 scrollstop 不够快）：

var ticking = false;
$(window).on("scroll", function() {
    if (!ticking) {
        requestAnimationFrame(function() {
            var top = $(window).scrollTop();
            $("div[data-role='header']")[top > 50 ? "addClass" : "removeClass"]("mini-header");
            ticking = false;
        });
        ticking = true;
    }
});

总结一句话（2025 年还在用 jQM 的同学）：

• 99% 的滚屏需求，scrollstart + scrollstop 就够了，写最少，性能最好，10 年不坏！
• 只有极致实时效果才用原生 scroll + rAF 节流。

需要我给你一个「jQuery Mobile 滚屏全家桶 Demo」（包含无限加载、吸顶、回到顶部、延迟加载图片 4 个完整案例），直接下载就能跑，告诉我一声就发你！