jQuery Mobile 1.4 无限滚动:窗口滚动不触发 [英] jQuery Mobile 1.4 infinite scrolling: Window scroll not firing

问题描述

在 jQuery Mobile 1.4 中，为什么 $(window).scroll 不触发?这是一个尝试检测用户何时滚动到页面末尾的非工作示例:

http://jsfiddle.net/5x6T2/

$(document).on('pagecontainershow', function () {$(窗口).滚动(功能(){if ($(window).scrollTop() + $(window).height() == $(document).height()) {alert("到达底部！");}});});

在 pageshow 被弃用之前，这在 jQuery Mobile 1.3 中一切正常:

http://jsfiddle.net/Demr7/

$(document).on('pageshow', '.ui-page', function() {$(窗口).滚动(功能(){if ($(window).scrollTop() + $(window).height() == $(document).height()) {alert("到达底部！");}});});

有人知道该怎么做吗?

解决方案

您无需使用任何第三方插件即可实现无限滚动.您只需要收听 scrollstart 或 scrollstop 并做一些数学运算.

你需要的是 $(window).scrollTop(), $.mobile.getScreenHeight(), $(".ui-content").outerHeight(), $(".ui-header").outerHeight() 和 $(".ui-footer").outerHeight().

当$(window).scrollTop()的值与视口高度减内容div的高度加工具栏高度的值匹配时，这意味着您已到达页面底部.

请注意，您应该删除每个固定工具栏的检索高度的1px.

将 scrollstop 侦听器附加到 document，然后定义高度变量.

$(document).on("scrollstop", function (e) {/* 活动页面 */var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),/* 窗口的 scrollTop() */滚动 = $(window).scrollTop(),/* 视口 */screenHeight = $.mobile.getScreenHeight(),/* 活动页面内的内容 div 高度 */contentHeight = $(".ui-content", activePage).outerHeight(),/* 活动页面内页眉的高度(删除 -1 表示不固定)*/header = $(".ui-header", activePage).outerHeight() - 1,/* 活动页面内页脚的高度(删除 -1 表示不固定)*/页脚 = $(".ui-footer", activePage).outerHeight() - 1,/* 滚动的总高度 */scrollEnd = contentHeight - 屏幕高度 + 页眉 + 页脚；/* 如果总滚动值等于或大于比内容 div 的总高度(总滚动)活动页面是目标页面(pageX 不是任何其他页面)调用 addMore() 函数 */if (activePage[0].id == "pageX" && scrolled >= scrollEnd) {添加更多();}});

<块引用>

演示 ⁽¹⁾

⁽¹⁾ 在 iPhone 5 Safari Mobile 上测试

In jQuery Mobile 1.4, why isn't $(window).scroll firing? Here's a non-working example trying to detect when the user has scrolled to the end of the page:

http://jsfiddle.net/5x6T2/

$(document).on('pagecontainershow', function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("Bottom reached!");
        }
    });
});

This was all working fine in jQuery Mobile 1.3 prior to the deprecation of pageshow:

http://jsfiddle.net/Demr7/

$(document).on('pageshow', '.ui-page', function() {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("Bottom reached!");
        }
    });
});

Anybody know what to do?

解决方案

You don't have to use any third party plugin to achieve infinity scrolling. You simply need to listen to either scrollstart or scrollstop and do some math.

What you need is $(window).scrollTop(), $.mobile.getScreenHeight(), $(".ui-content").outerHeight(), $(".ui-header").outerHeight() and $(".ui-footer").outerHeight().

When $(window).scrollTop()'s value matches the value of viewport's height minus content div's height plus toolbars height, it means you have reached the bottom of the page.

Note that you should remove 1px of retrieved height of each fixed toolbars.

Attach scrollstop listener to document and then define heights variables.

$(document).on("scrollstop", function (e) {

        /* active page */
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),

        /* window's scrollTop() */
        scrolled = $(window).scrollTop(),

        /* viewport */
        screenHeight = $.mobile.getScreenHeight(),

        /* content div height within active page */
        contentHeight = $(".ui-content", activePage).outerHeight(),

        /* header's height within active page (remove -1 for unfixed) */
        header = $(".ui-header", activePage).outerHeight() - 1,

        /* footer's height within active page (remove -1 for unfixed) */
        footer = $(".ui-footer", activePage).outerHeight() - 1,

        /* total height to scroll */
        scrollEnd = contentHeight - screenHeight + header + footer;

    /* if total scrolled value is equal or greater
       than total height of content div (total scroll)
       and active page is the target page (pageX not any other page)
       call addMore() function */
    if (activePage[0].id == "pageX" && scrolled >= scrollEnd) {
        addMore();
    }
});

Demo ⁽¹⁾

⁽¹⁾ Tested on iPhone 5 Safari Mobile

这篇关于jQuery Mobile 1.4 无限滚动:窗口滚动不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！