jQuery Mobile 1.4无限滚动:不触发窗口滚动 [英] jQuery Mobile 1.4 infinite scrolling: Window scroll not firing
问题描述
在jQuery Mobile 1.4中,为什么不触发$(window).scroll
?这是一个无法正常工作的示例,试图检测用户何时滚动到页面末尾:
$(document).on('pagecontainershow', function () {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
在弃用pageshow
之前,这一切在jQuery Mobile 1.3中都可以正常工作:
$(document).on('pageshow', '.ui-page', function() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
有人知道该怎么办吗?
您无需使用任何第三方 plugin 即可实现无限滚动.您只需要听 scrollstart
或,$(".ui-header").outerHeight()
和$(".ui-footer").outerHeight()
.
当$(window).scrollTop()
的值与视口的高度减去内容div的高度 plus 工具栏的高度匹配时,表明您已经到达页面底部. /p>
请注意,您应该删除每个固定工具栏的检索高度的1px
.
将scrollstop
侦听器附加到document
,然后定义heights变量.
$(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();
}
});
演示 (1)
(1)在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:
$(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
:
$(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 (1)
(1) Tested on iPhone 5 Safari Mobile
这篇关于jQuery Mobile 1.4无限滚动:不触发窗口滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!