blocks|key|877944|text|我不熟悉您正在使用的特定元素，但是为了在一个完整大小的窗口上实现这一点，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|877945|$wnd.onscroll+=+function()+{
++++if+(($wnd.height+-+$wnd.scrollTop)+<+SOME_MARGIN)+then+doSomething();
};|code-block|syntax|javascript|877946|其中scrollTop本质上是“滚动了多少像素”。我假设将此应用于您正在使用的表将完成这项工作。|877947|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I'm not familiar with the specific element you are using, but in order 
 to implement this on a full size window, you can do the following:

<pre><code>$wnd.onscroll = function() {
 if (($wnd.height - $wnd.scrollTop) &lt; SOME_MARGIN) then doSomething();
};
</code></pre>

Where scrollTop is essentially "how many pixels have been scrolled".
I assume applying this to the table you are working with will do the job.

blocks|key|877949|text|在今天阅读Firebug中的DOM属性时，我注意到了一个名为scrollY的属性(在DOM选项卡下的Firebug中，请转到content+>+scrollY)，它似乎是窗口上待滚动的像素数量。尝试查看这是否也是为可滚动元素创建的。然后，您可以使用Yuval的函数加载新数据。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|877950|entityMap^0|U|7|1Q|7|20|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

There is a property I noticed while reading through DOM properties in Firebug today called <code>scrollY</code> (in Firebug under the DOM tab go to <code>content</code> > <code>scrollY</code>) which appears to be the amount of pixels left to scroll on the window. Try seeing if this is also created for scrollable elements. Then you can use Yuval's function to load new data.

blocks|key|1231039|text|我刚刚在谷歌上搜索了一下，找到了这篇文章：用Ajax、JavaScript和XML实现动态滚动。看上去是个彻底的解释。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1231040|entityMap|0|LINK|mutability|MUTABLE|url|http://www.developer.com/design/article.php/3681771^0|L|Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I've just googled for it and found this article: <a href="http://www.developer.com/design/article.php/3681771" rel="nofollow noreferrer">Implementing Dynamic Scroll with Ajax, JavaScript, and XML</a>. It looks like a thorough explanation.

blocks|key|231586|text|谢谢你的回答。这是我的最后一个工作代码(受Greg和ajaxian.com的启发)，它使用一些jQuery函数并与YUI+DataTable一起工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|231587|$(".yui-dt-bd").scroll(load_more);

function+load_more()+{++++++++++++++
++++if+($(this).scrollend())+{
++++++++alert("SCROLL+END+REACHED+!");
++++++++//+TODO+load+more+data
++++}
}

$.fn.scrollend+=+function()+{
++++return+this[0].scrollHeight+-+this[0].scrollTop+-+this.height()+<=+0;
}|code-block|syntax|javascript|231588|下一步是实现我自己的YUI分页器，以实现与YUI组件的完全集成:)|231589|entityMap|0|LINK|mutability|MUTABLE|url|http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery|1|http://developer.yahoo.com/yui/datatable/|2|http://developer.yahoo.com/yui/paginator/^0|Q|B|0|1L|D|1|0|0|A|6|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

Thank you for your answers. That's my final working code (inspired by Greg and <a href="http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery" rel="nofollow noreferrer">ajaxian.com</a>), that uses some jQuery functions and works with the <a href="http://developer.yahoo.com/yui/datatable/" rel="nofollow noreferrer">YUI DataTable</a>.

<pre><code>$(".yui-dt-bd").scroll(load_more);

function load_more() { 
 if ($(this).scrollend()) {
 alert("SCROLL END REACHED !");
 // TODO load more data
 }
}

$.fn.scrollend = function() {
 return this[0].scrollHeight - this[0].scrollTop - this.height() &lt;= 0;
}
</code></pre>

My next step is to implement my own <a href="http://developer.yahoo.com/yui/paginator/" rel="nofollow noreferrer">YUI Paginator</a> to achieve a complete integration with YUI components :)

blocks|key|882717|text|费克。不喜欢无休止的滚动；它打破了人们对网络工作方式的一些关键假设。请承诺只在下列条件下实施：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|882718|1)您不能用它来代替一个非常好的页面，该页面将所有内容加载到一个很好的长表中，并允许用户使用Ctrl在页面中搜索边缘出现的时间。|882719|2)您不打算在每个滚动数据块的底部插入一个广告。|882720|3)您正在为盲人和禁用JavaScript的人提供工作上的后盾(嘿，又有一张漂亮的长桌)。|882721|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Ick. Not a big fan of endless scrolling; it breaks some of the key assumptions people make about how the Web works. Please promise you will only implement it under the following conditions:

1) you are not substituting it for a perfectly good page that loads everything in a nice long table and lets the user use Ctrl-F to search inside the page for what time Fringe comes on.

2) you don't plan on inserting an ad at the bottom of each chunk of scrolled data.

3) you are providing a working fallback (hey, there's that nice long table again) for blind people and people browsing the Web with JavaScript disabled.

blocks|key|231660|text|如果您使用的是YUI，那么它有一个在表滚动时触发的tableScrollEvent。将其与dataTable的generateRequest函数相结合，您可以通过观察tableScrollEvent并在接近数据集末尾时启动请求来实现无休止的滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|231661|YUI文档没有针对本例的具体示例，但确实向您展示了由如何处理数据返回的generateRequest|231662|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/docs/YAHOO.widget.ScrollingDataTable.html#event_tableScrollEvent|1|2|http://developer.yahoo.com/yui/datatable/#data^0|P|G|0|2B|G|1|0|Q|6|2|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]|$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|M]]|O|$5|I|J|K|C|$L|P]]]]

If you're using the YUI, it has a <a href="http://developer.yahoo.com/yui/docs/YAHOO.widget.ScrollingDataTable.html#event_tableScrollEvent" rel="nofollow noreferrer">tableScrollEvent</a> that gets fired when the table scrolls. Couple this with the dataTable's generateRequest function and you could implement endless scrolling by watching the <a href="http://developer.yahoo.com/yui/docs/YAHOO.widget.ScrollingDataTable.html#event_tableScrollEvent" rel="nofollow noreferrer">tableScrollEvent</a> and starting a request when you get near the end of your dataset.

The YUI doc's don't have a specific example for this case, but does show you <a href="http://developer.yahoo.com/yui/datatable/#data" rel="nofollow noreferrer">how to handle the data</a> returned by generateRequest

blocks|key|882765|text|您可以看到它只运行这里+YUI。与上面建议的解决方案相比，滚动条不断移动，位置和大小反映可视区域的真实大小和位置，当滚动条到达底部时它不会加载下一批。只有当整个记录的最后一个位于查看区域的底部时，滚动条才会到达底部。当然，只有当你知道有多少记录时，这才能起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|882766|entityMap|0|LINK|mutability|MUTABLE|url|http://www.satyam.com.ar/yui/2.8.0/infinite.html^0|9|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can see it working <a href="http://www.satyam.com.ar/yui/2.8.0/infinite.html" rel="nofollow noreferrer">here</a> YUI only. In contrast with one of the solutions suggested above, the scrollbar moves continuously, the position and size reflect the true size and position of the viewable area, it doesn't load the next batch when the scrollbar reaches bottom. The scrollbar reaches bottom only when the last of the whole records is at the bottom of the viewing area. Of course, this only works if you do know how many records there are.

I am displaying a scrolled data table in a web page. This table has several thousands of dynamic rows, so it is loaded from the server (via AJAX).

The user can scroll up and down, so what I need is to detect when the user reaches the end of the scrollbar (that is, the last row at the bottom of the table) in order to request and show more data.

You can find this effect in google reader, when you scroll down to the last post in a given feed, google requests and shows new posts in a transparent way, but I can't figure out how they achieve it.

By the way, right now I am using a <a href="http://developer.yahoo.com/yui/datatable/" rel="noreferrer">YUI Datatable</a>

"Endless scrolling" effect in a HTML table

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在网页中显示一个滚动数据表。这个表有数千个动态行，因此它是从服务器(通过AJAX)加载的。用户可以上下滚动，所以我需要的是检测用户何时到达滚动条的末尾(即表底部的最后一行)，以便请求和显示更多数据。你可以在google阅读器中找到这种效果，当你向下滚动到给定提要中的最后一篇文章时，谷歌会以一种透明的方式请求并显示新的...

问HTML表中的“无限滚动”效果
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表中的“无限滚动”效果EN