在 jQuery Mobile 1.4 中,为什么不是 $(window).scroll
开火?这是一个尝试检测用户何时滚动到页面末尾的无效示例:
http://jsfiddle.net/5x6T2/
$(document).on('pagecontainershow', function () {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
在弃用
pageshow
之前,这一切在 jQuery Mobile 1.3 中运行良好:http://jsfiddle.net/Demr7/
$(document).on('pageshow', '.ui-page', function() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
有人知道该怎么做吗?
最佳答案
您不必使用任何第三方插件来实现无限滚动。您只需要收听 scrollstart
或 scrollstop
并做一些数学运算。
您需要的是$(window).scrollTop()
, $.mobile.getScreenHeight()
, $(".ui-content").outerHeight()
, $(".ui-header").outerHeight()
和 $(".ui-footer").outerHeight()
.
当$(window).scrollTop()
的值与视口(viewport)高度减去内容 div 高度加上工具栏高度的值相匹配,这意味着您已到达页面底部。
请注意,您应该删除 1px
每个固定工具栏的检索高度。
附上scrollstop
收听 document
然后定义高度变量。
$(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 (1)
(1) 在 iPhone 5 Safari Mobile 上测试
关于jquery-mobile - jQuery Mobile 1.4 无限滚动 : Window scroll not firing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24728140/