blocks|key|411139|text|在jQuery中，使用滚动功能检查是否已到达页面底部。完成后，执行一个ajax调用(您可以在ajax响应之前在此处显示加载图像)并获取下一组数据，将其附加到div。当您再次向下滚动页面时，将执行此函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411140|$(window).scroll(function()+{
++++if($(window).scrollTop()+==+$(document).height()+-+$(window).height())+{
+++++++++++//+ajax+call+get+data+from+server+and+append+to+the+div
++++}
});|code-block|syntax|javascript|411141|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|$]]

In jQuery, check whether you have hit the bottom of page using scroll function. Once you hit that, make an ajax call (you can show a loading image here till ajax response) and get the next set of data, append it to the div. This function gets executed as you scroll down the page again.

<pre><code>$(window).scroll(function() {
 if($(window).scrollTop() == $(document).height() - $(window).height()) {
 // ajax call get data from server and append to the div
 }
});
</code></pre>

blocks|key|193042|text|当窗口放大到一个>100%25的值时，这个问题的公认答案与chrome有一些问题。以下是chrome开发人员推荐的代码，作为我在同一个bug中提出的错误的一部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193043|$(window).scroll(function()+{
++if($(window).scrollTop()+%2B+$(window).height()+>=+$(document).height()){
+++++//Your+code+here
++}
});|code-block|syntax|javascript|193044|供参考：|193045|Related+SO+question|offset|length|193046|Chrome+Bug|193047|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/30320512/code-on-scroll-event-is-not-executing-if-window-is-zoomed-in-out-in-chrome|1|https://bugs.chromium.org/p/chromium/issues/detail?id=489618^0|0|0|0|0|J|0|0|0|A|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

The accepted answer of this question has some issue with chrome when the window is zoomed in to a value >100%. Here is the code recommended by chrome developers as part of a bug i had raised on the same.

<pre><code>$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() &gt;= $(document).height()){
 //Your code here
 }
});
</code></pre>

For reference:

<a href="https://stackoverflow.com/questions/30320512/code-on-scroll-event-is-not-executing-if-window-is-zoomed-in-out-in-chrome">Related SO question</a>

<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=489618" rel="noreferrer">Chrome Bug</a>

blocks|key|411221|text|如果不是所有的文档都滚动，比如说，当你在文档中有一个滚动的div时，上面的解决方案在没有适应的情况下将无法工作。下面是如何检查div的滚动条是否触底的方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|411222|$('#someScrollingDiv').on('scroll',+function()+{
++++let+div+=+$(this).get(0);
++++if(div.scrollTop+%2B+div.clientHeight+>=+div.scrollHeight)+{
++++++++//+do+the+lazy+loading+here
++++}
});|code-block|syntax|javascript|411223|entityMap^0|T|3|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|$]]

If not all of your document scrolls, say, when you have a scrolling <code>div</code> within the document, then the above solutions won't work without adaptations. Here's how to check whether the div's scrollbar has hit the bottom:

<pre><code>$('#someScrollingDiv').on('scroll', function() {
 let div = $(this).get(0);
 if(div.scrollTop + div.clientHeight &gt;= div.scrollHeight) {
 // do the lazy loading here
 }
});
</code></pre>

blocks|key|193110|text|我建议使用更多的Math.ceil来避免在某些屏幕上出现错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193111|因为在一些不同的屏幕上，它不是绝对准确的|193112|我意识到当我console.log的时候。|193113|console.log($(window).scrollTop());+//5659.20123123890++|code-block|syntax|javascript|193114|和|193115|console.log$(document).height()+-+$(window).height());+//+5660|193116|所以我认为我们应该编辑你的代码来|193117|$(window).scroll(function()+{
++++if(Math.ceil($(window).scrollTop())+
+++++++==+Math.ceil(($(document).height()+-+$(window).height())))+{
+++++++++++//+ajax+call+get+data+from+server+and+append+to+the+div
++++}
});|193118|或者允许在滚动到底部之前从服务器加载数据。|193119|if+($(window).scrollTop()+>=+($(document).height()+-+$(window).height()+-+200))+{
+//+Load+data
}|193120|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

I suggest using more Math.ceil for avoid error on some screen. 
Because on a few different screens it's not absolutely accurate 
I realized that when I console.log.
<pre><code>console.log($(window).scrollTop()); //5659.20123123890 
</code></pre>
And
<pre><code>console.log$(document).height() - $(window).height()); // 5660
</code></pre>
So I think we should edit your code to
<pre><code>$(window).scroll(function() {
 if(Math.ceil($(window).scrollTop()) 
 == Math.ceil(($(document).height() - $(window).height()))) {
 // ajax call get data from server and append to the div
 }
});
</code></pre>
Or Allow load data from server before scroll until bottom.
<pre><code>if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height() - 200)) {
 // Load data
}
</code></pre>

I am just wondering how can i implement more data on scroll only if the div.loading is visible.

Usually we look for page height and scroll height, to see if we need to load more data. but the following example is little complicated then that.

Following image is perfect example. there are two .loading div's on the drop down box. When user scroll the content, whichever is visible it should start loading more data for it.

<img src="https://i.stack.imgur.com/IKHNl.png" alt="enter image description here">

So how can i find out if .loading div is visible to user yet or not? So i can start loading data for that div only.

jQuery load more data on scroll

服务器

jQuery

我只是在想，只有当div.loading可见时，我如何才能在滚动上实现更多的数据。通常我们会查看页面高度和滚动高度，看看是否需要加载更多的数据。但是下面的例子就有点复杂了。下面的图片就是一个很好的例子。下拉框中有两个.loading div。当用户滚动内容时，应该开始为其加载更多的数据。​​那么，我如何才能确定.loa...

问jQuery在滚动上加载更多数据
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery在滚动上加载更多数据EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery在滚动上加载更多数据
EN