10

假设我有div，我想提取数据并将数据推送到该div中。当用户在div中滚动时，下一组数据将被提取并推送到div中。如何使用jQuery检测滚动条的位置？我不想使用任何插件。我需要jQuery代码。以下是示例链接ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinetscroller.html但它使用了一个插件。

改进这个问题

4个答案4

重置为默认值
43

大致如下：

$（窗口）.sroll（函数（）{if（$（window）.crollTop（）+$（windows）.height（）==$（document）.heigh（））{var new_div='<div class=“new_block”></div>'；$（'.main_content'）.append（new_div.load（'/path/to/script.php'））；}});

当滚动条到达页面底部时，这将向主页容器附加一个新元素。它还使用从外部脚本加载的内容填充此新元素。

如果要检测用户是否已将特定div滚动到底部：

$（'.some_element'）.bind（'scroll'，function（）{if（$（this）.crollTop（）+$（this.innerHeight（）>=$（thi斯）[0].crollHeight）{var new_div='<div class=“new_block”></div>'；$（'.main_content'）.append（new_div.load（'/path/to/script.php'））；}});
改进此答案
4
  • 为什么你写这行像$（this）[0].srollHeight为什么不写$（thise）.srollheight。为什么你在这里写得像数组。请提及。谢谢
    – 托马斯
    评论 2012年4月9日11:35
  • @Thomas，这是方括号表示法，用于访问jQuery对象$（this）的第零个属性。jQuery对象是类似数组的，因此您可以依赖于第一个属性的一致性。在本例中，它是对jQuery对象包装的DOM节点的引用。这是一个速记。
    – 束流（Bungle）
    评论 2014年1月6日2:57
  • @霍纳-近乎完美！；）我对第二个街区做了一个小修改。对于一个有溢出-y：自动，以下逻辑对我有效：$（this）.crollTop（）===（$（thi）[0].crollHeight-$（thi斯）.innerHeight（））.
    – 康·安东尼亚科斯
    评论 2014年11月6日16:55
  • 最好在75%的滚动Math.round（$（this）.crollTop（）+$（this.innerHeight（））==$（thi）[0].crollHeight上获取它
    – 哈里萨曼
    评论 2015年2月13日14:15
三

此代码已测试并验证有效。当您滚动div时，代码通过比较滚动条高度和滚动条位置来检查滚动条是否到达底部。如果是这样，它将调用一个获取更多内容并将其附加到div的方法。

享受吧！

科比

$（文档）.ready（函数（）{$（“div”）.sroll（函数（）{var$this=$（this）；var height=this.scrollHeight-$this.height（）；//获得跳水高度var scroll=$this.scrollTop（）；//获取垂直滚动位置var isScrolledToEnd=（滚动>=高度）；$（“.croll-pos”）.text（滚动）；$（“.croll-height”）.text（高度）；if（滚动到结束）{var additionalContent=获取更多内容（）；//获取其他内容$this.append（附加内容）；//附加附加内容}});});

根据您的评论，以下是正在运行的整个HTML页面源代码（在IE 9下测试）：

**请确保您正在引用jquery库**

<html xmlns=“http://www.w3.org/1999/xhtml"><头部><title>测试图像<script src=“assets/js/jquery.js”type=“text/javascript”></script><script type=“text/javascript”>$（文档）.ready（函数（）{$（“div”）.sroll（函数（）{var$this=$（this）；var height=this.scrollHeight-$this.height（）；//获得跳水高度var scroll=$this.scrollTop（）；//获取垂直滚动位置var isScrolledToEnd=（滚动>=高度）；$（“.croll-pos”）.text（滚动）；$（“.croll-height”）.text（高度）；if（滚动到结束）{var additionalContent=获取更多内容（）；//获取其他内容$this.append（additionalContent）；//附加附加内容}});});函数GetMoreContent（）{return“这是div内容；}</script></头><body><div style=“溢出：滚动；高度：150px；边框：1px实心红色；”><p>这是div内容</p><p>这是div内容</p><p>这是div内容</p><p>这是div内容</p><p>这是div内容</p><p>这是div内容</p></div>滚动高度：<span class=“Scroll-Height”></span><br/>滚动位置：<span class=“Scroll-pos”></span></body></html>
改进此答案
0
0

我想.crollTop（）是你选择的武器。jQuery API

获取第一个滚动条的当前垂直位置匹配元素集中的元素。

因此，请确保将其绑定到正确的元素。我想直接坐在沙发上应该行。

垂直滚动位置与在可滚动区域上方隐藏。如果滚动条是在最顶部，或者如果元素不可滚动，则此数字将为0。

因此，您可能必须找到一种方法来计算div的高度，就好像它将在没有滚动条的情况下被拉伸一样，以便将这些数字与加载事件的拍摄有意义的关系。

改进此答案
0

为了实现这种行为，您不需要jquery或jquery插件，只需使用香草爪哇文和IntersectionObserver API接口.

你所需要做的就是放置元素并监听它们何时在屏幕上出现。

你可以用几个javascript和html行来完成这项任务，它比在浏览器中监听滚动事件的性能要好得多

我最近写了一篇关于无限滚动和这种特定行为的文章在这里

我希望它能为你的具体需求提供指导

改进此答案

你的答案

单击“发布您的答案”，表示您同意我们的服务条款并确认您已阅读我们的隐私政策.

不是你想要的答案吗？浏览标记的其他问题或问你自己的问题.