0xd*_*d00 12 javascript jquery scroll infinite-scroll
我有很多内容要在网站上显示,这样我需要使用"无限"滚动解决方案,当用户滚动到当前加载内容的末尾时加载内容.但是,我确切知道有多少数据,我希望用户对此有所了解.我不喜欢滚动条使得它看起来几乎到了内容的末尾,然后突然加载更多内容并且拇指/滑块位于滚动轨道的中间并且更窄.
我计划的解决方案是在当前内容很大但是为空的情况下创建一个div,然后在加载更多内容时缩小它.有更好的想法吗?
我的最终解决方案是在具有滚动条的 div 中创建一个表格。我将表格的高度设置为内容总量的高度,第一行设置为未查看内容部分的高度,下一行是当前正在查看的内容。
然后,我使用了一个与横向卷轴视频游戏中使用的过程非常相似的过程,在该过程中,您只绘制屏幕上可见的内容,或者仅绘制可见区域附近的内容。我利用路径点来跟踪用户滚动到的位置,然后刷新可见内容并使用 jquery 滚动到功能将用户保持在他们正在查看的同一位置。因此,在任何时候,只有大约一页的内容会“显示”在当前查看区域的上方或下方。
我应该指出,所有“内容”实际上已经在客户端系统上,因此下载不是问题。对我来说,问题是“内容”是一个巨大的 DOM 结构,如果我尝试一次处理所有内容,最终会严重减慢客户端系统的速度。所以我一次只创建并显示其中的一部分。
当屏幕刷新时,这确实会导致一些不稳定,如果您决定抓住滚动条并将其拖动到内容的底部,则情况会很糟糕。如果我找到更好的东西,我会更新它。
更新 我在我的网站上记录了如何执行此操作:http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/