blocks|key|508122|text|你是否为iphones添加了meta标签，用于设置手机视区的内容大小？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508123|<meta+name="viewport"+content="width=device-width;+initial-scale=1.0;+maximum-scale=1.0;">|code-block|syntax|javascript|508124|编辑：|508125|所以我在我的手机(安卓，姜饼)上试了一下，问题并不是代码不能工作，而是显示的内容不能强制页面滚动。当我放大并向下滚动更多动态加载的内容时。您可以尝试添加内容，直到添加的内容大于$(window).height()；|508126|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Have you added the meta tag for iphones which sets the content size to the viewport of the phone?

<pre><code>&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&gt;
</code></pre>

EDIT:

So I tried this on my phone (android, gingerbread) and the issue wasn't so much the code not working it was the content displayed does not force the page to scroll. As soon as I zoomed in and scrolled down more content dynamically loaded. You could try adding content until the content added is greater than $(window).height();

blocks|key|508190|text|在所有浏览器上获取文档高度的防弹方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508191|function+getDocumentHeight()+{
++++return+Math.max(
++++++++Math.max(document.body.scrollHeight,+document.documentElement.scrollHeight),
++++++++Math.max(document.body.offsetHeight,+document.documentElement.offsetHeight),
++++++++Math.max(document.body.clientHeight,+document.documentElement.clientHeight)
++++);
}|code-block|syntax|javascript|508192|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Bullet proof way to get document height on all browsers:

<pre><code>function getDocumentHeight() {
 return Math.max(
 Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
 Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
 Math.max(document.body.clientHeight, document.documentElement.clientHeight)
 );
}
</code></pre>

blocks|key|508264|text|对于后来在这里查看的任何人，我通过将height=device-height添加到meta视口标记解决了这个问题：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|508265|<meta+name="viewport"+content="width=device-width,+height=device-height,+initial-scale=1.0">|code-block|syntax|javascript|508266|然后，您可以继续使用$(document).scroll(function(){});|508267|这适用于iOS+5|508268|entityMap^0|I|K|15|4|0|0|A|X|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

For anyone who looks here later, I solved this by adding <code>height=device-height</code> to the <code>meta</code> viewport tag:

<pre><code>&lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"&gt;
</code></pre>

You can then carry on using <code>$(document).scroll(function(){});</code> 

This worked with iOS 5

blocks|key|724862|text|你也可以使用一个无限的滚动插件：https://github.com/fredwu/jquery-endless-scroll+https://github.com/paulirish/infinite-scroll|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|724863|我正在使用无限滚动，它在我的笔记本电脑和iphone上工作得很好|724864|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/fredwu/jquery-endless-scroll|1|https://github.com/paulirish/infinite-scroll^0|G|1B|0|1S|18|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

you can also use an endless scroll plugin: <a href="https://github.com/fredwu/jquery-endless-scroll" rel="nofollow">https://github.com/fredwu/jquery-endless-scroll</a>
https://github.com/paulirish/infinite-scroll

i'm using the endless scroll and it works great on my laptop and iphone

blocks|key|724922|text|如果你能做到，你真的应该避免尝试达到一个确切的数字。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|724923|使用上面Stelok的函数，您可以像这样测试：|724924|if+($win.height()+%2B+$win.scrollTop()+>+(getDocumentHeight()-10))+{|code-block|syntax|javascript|724925|它有点柔和-用户可能没有滚动到确切的最后一个像素，但认为他/她在底部。|724926|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you can, you should really avoid trying to hit an exact number. 

Using Stelok's function above, you can test like this:

<pre><code>if ($win.height() + $win.scrollTop() &gt; (getDocumentHeight()-10)) {
</code></pre>

It's a bit softer - the user may not have quite scrolled to the exact last pixel but thinks he/she is at the bottom.

blocks|key|508498|text|以下是其他答案的汇总，对我来说非常有效。它可以在某个时候写成一个jQuery插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508499|//+Handles+scrolling+past+the+window+up+or+down+to+refresh+or+load+more+data.
var+scrolledPastTop+=+false;
var+scrolledPastBottom+=+false;
var+scrollPrevious+=+0;

function+getDocumentHeight()+{
++return+Math.max(
++++++Math.max(document.body.scrollHeight,+document.documentElement.scrollHeight),
++++++Math.max(document.body.offsetHeight,+document.documentElement.offsetHeight),
++++++Math.max(document.body.clientHeight,+document.documentElement.clientHeight)
++);
}

function+bottomScrollRefresh(callback)+{
++var+pastBottom+=+$window.height()+%2B+$window.scrollTop()+>+getDocumentHeight();
++if(!scrolledPastBottom+&&+pastBottom)+{
++++callback($window.height()+%2B+$window.scrollTop());
++++scrolledPastBottom+=+true;
++}+else+{
++++if(!pastBottom)+scrolledPastBottom+=+false;
++}
++scrollPrevious+=+$window.scrollTop();
}

function+topScrollRefresh(callback)+{
++var+pastTop+=+$window.scrollTop()+<+scrollPrevious+&&+$window.scrollTop()+<=+0;
++if(!scrolledPastTop+&&+pastTop)+{
++++callback($window.scrollTop());
++++scrolledPastTop+=+true;
++}+else+{
++++if(!pastTop)+scrolledPastTop+=+false;
++}
++scrollPrevious+=+$window.scrollTop();
}|code-block|syntax|javascript|508500|要在您的代码中使用它，请添加如下内容：|508501|window.onscroll+=+function()+{
++topScrollRefresh(function(pos)+{
++++++console.log("Loading+top.+"+%2B+pos);
++});
++bottomScrollRefresh(function(pos)+{
++++console.log("Loading+bottom.+"+%2B+pos);
++});
};|508502|适用于我的PhoneGap/Cordova应用程序。|508503|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is an aggregate of the other answers which works very well for me. It could be written as a jQuery plugin sometime.

<pre><code>// Handles scrolling past the window up or down to refresh or load more data.
var scrolledPastTop = false;
var scrolledPastBottom = false;
var scrollPrevious = 0;

function getDocumentHeight() {
 return Math.max(
 Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
 Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
 Math.max(document.body.clientHeight, document.documentElement.clientHeight)
 );
}

function bottomScrollRefresh(callback) {
 var pastBottom = $window.height() + $window.scrollTop() &gt; getDocumentHeight();
 if(!scrolledPastBottom &amp;&amp; pastBottom) {
 callback($window.height() + $window.scrollTop());
 scrolledPastBottom = true;
 } else {
 if(!pastBottom) scrolledPastBottom = false;
 }
 scrollPrevious = $window.scrollTop();
}

function topScrollRefresh(callback) {
 var pastTop = $window.scrollTop() &lt; scrollPrevious &amp;&amp; $window.scrollTop() &lt;= 0;
 if(!scrolledPastTop &amp;&amp; pastTop) {
 callback($window.scrollTop());
 scrolledPastTop = true;
 } else {
 if(!pastTop) scrolledPastTop = false;
 }
 scrollPrevious = $window.scrollTop();
}
</code></pre>

To use this in your code, add something like this:

<pre><code>window.onscroll = function() {
 topScrollRefresh(function(pos) {
 console.log("Loading top. " + pos);
 });
 bottomScrollRefresh(function(pos) {
 console.log("Loading bottom. " + pos);
 });
};
</code></pre>

Works great for my PhoneGap/Cordova app.

blocks|key|508561|text|代码的改进的jQuery版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508562|var+scrollRefresh+=+{
++++pastTop:+false,
++++pastBottom:+false,
++++previous:+0,
++++bottom:+function(callback)+{
++++++var+pBottom+=+$(window).height()+%2B+$(window).scrollTop()+>=+$(document).height();
++++++if(!this.pastBottom+&&+pBottom)+{
++++++++callback($(window).height()+%2B+$(window).scrollTop());
++++++++this.pastBottom+=+true;
++++++}+else+{
++++++++if(!pBottom)+this.pastBottom+=+false;
++++++}
++++++this.previous+=+$(window).scrollTop();
++++},
++++top:+function(callback)+{
++++++var+pTop+=+$(window).scrollTop()+<+this.scrollPrevious+&&+$(window).scrollTop+<=+0;
++++++if(!this.pastTop+&&+pTop)+{
++++++++callback($(window).scrollTop());
++++++++this.pastTop+=+true;
++++++}+else+{
++++++++if(!pTop)+this.pastTop+=+false;
++++++}
++++++this.previous+=+$(window).scrollTop();
++++}
++}

++$(window).scroll(function()+{
++++scrollRefresh.top(function(pos)+{
++++++console.log("Loading+top.+"+%2B+pos);
++++++alert("scrolled+to+top");+//You+should+delete+this+line
++++});
++++scrollRefresh.bottom(function(pos)+{
++++++console.log("Loading+bottom.+"+%2B+pos);
++++++alert("scrolled+to+bottom");+//You+should+delete+this+line
++++});
++});|code-block|syntax|javascript|508563|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

An improved jQuery version of the code

<pre><code>var scrollRefresh = {
 pastTop: false,
 pastBottom: false,
 previous: 0,
 bottom: function(callback) {
 var pBottom = $(window).height() + $(window).scrollTop() &gt;= $(document).height();
 if(!this.pastBottom &amp;&amp; pBottom) {
 callback($(window).height() + $(window).scrollTop());
 this.pastBottom = true;
 } else {
 if(!pBottom) this.pastBottom = false;
 }
 this.previous = $(window).scrollTop();
 },
 top: function(callback) {
 var pTop = $(window).scrollTop() &lt; this.scrollPrevious &amp;&amp; $(window).scrollTop &lt;= 0;
 if(!this.pastTop &amp;&amp; pTop) {
 callback($(window).scrollTop());
 this.pastTop = true;
 } else {
 if(!pTop) this.pastTop = false;
 }
 this.previous = $(window).scrollTop();
 }
 }

 $(window).scroll(function() {
 scrollRefresh.top(function(pos) {
 console.log("Loading top. " + pos);
 alert("scrolled to top"); //You should delete this line
 });
 scrollRefresh.bottom(function(pos) {
 console.log("Loading bottom. " + pos);
 alert("scrolled to bottom"); //You should delete this line
 });
 });
</code></pre>

blocks|key|508583|text|这是对我有效的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508584|(window.innerHeight+%2B+window.scrollY)+==+$(document).height()|code-block|syntax|javascript|508585|点击此处：Javascript:+How+to+detect+if+browser+window+is+scrolled+to+bottom?|offset|length|508586|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom^0|0|0|5|1U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This is what worked for me:

<pre><code>(window.innerHeight + window.scrollY) == $(document).height()
</code></pre>

Found here:
<a href="https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom">Javascript: How to detect if browser window is scrolled to bottom?</a>

blocks|key|508678|text|使用下面的jquery和Strelok的getDocumentHeight()+(干杯！)我发现下面的方法运行得很好。相等性测试对我不起作用，因为iPhone只在幻灯片末尾注册了一个滚动值，实际上大于文档高度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|508679|$(window).scroll(function+()+{
++var+docHeight+=+getDocumentHeight();+++++++++
++if+($(window).scrollTop()+%2B+$(window).height()+>=+docHeight)+{
++++//+Do+stuff
++}
});|code-block|syntax|javascript|508680|entityMap^0|K|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Using jquery and Strelok's <code>getDocumentHeight()</code> below (cheers!) I found the following worked pretty well. Testing for equality didn't work for me as the iPhone only registered a scroll value at the end of the slide which was actually greater than the document height:

<pre class="lang-jquery prettyprint-override"><code>$(window).scroll(function () {
 var docHeight = getDocumentHeight(); 
 if ($(window).scrollTop() + $(window).height() &gt;= docHeight) {
 // Do stuff
 }
});
</code></pre>

blocks|key|725165|text|虽然这个问题是5年前提出的，但在今天的UI/UX上下文中，它仍然是非常相关的。我想补充一下我的两点意见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|725166|var+element+=+document.getElementById('flux');
if+(element.scrollHeight+-+element.scrollTop+===+element.clientHeight)
{
++++//+element+is+at+the+end+of+its+scroll,+load+more+content
}|code-block|syntax|javascript|725167|来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled|offset|length|725168|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled^0|0|0|3|3B|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Though the question was asked 5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.

<pre><code>var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
 // element is at the end of its scroll, load more content
}
</code></pre>

Source: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled</a>

I wish to achieve content load when the user scrolls to the bottom of the page. 

I am having a problem. It works fine on desktop browsers but not on mobile. I have implemented a dirty fix to make it work on the iPhone, but is not optimal as it won't work on other sized mobile devices.

My website is www.cristianrgreco.com, scroll down to see the effect in action

The problem is adding the scroll and the height do not equal the height on mobile devices, whereas they do on desktop browsers. 

Is there a way to detect for mobile browsers?

Thanks in advance. 

Below is the code currently being used:

<pre><code>$(document).ready(function () {
 $(".main").hide().filter(":lt(3)").show();
 if ($(document).height() == $(window).height()) {
 // Populate screen with content
 }
 else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
 window.onscroll = function () {
 if ($(document).height() - $(window).scrollTop() &lt;= 1278) {
 // At the moment only works on iPhone
 }
 }
 }
 else {
 $(window).scroll(function () {
 if ($(window).scrollTop() + $(window).height() &gt;= $(document).height()) { 
 // Works perfect for desktop browsers
 }
 })
 }
})
</code></pre>

JQuery Detect Scroll at Bottom

PhoneGap

Android

Cordova

jQuery

我希望当用户滚动到页面底部时实现内容加载。我有个问题。它在桌面浏览器上运行得很好，但在移动设备上就不行。我已经实现了一个肮脏的修复来使它在iPhone上工作，但并不是最优的，因为它不能在其他大小的移动设备上工作。我的网站是www.cristianrgreco.com，向下滚动查看实际效果问题是在移动设备上添加滚动和高度...

问JQuery检测底部滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery检测底部滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery检测底部滚动
EN