【问题标题】:How to detect when at the bottom of a scrollable div?如何检测何时位于可滚动div的底部?
【发布时间】:2014-08-06 15:43:34
【问题描述】:

我创建了一个网站,可以在您向下滚动时加载数据。每次您点击页面底部时,它都会加载另外 100 行。我正在尝试在 div 中复制它,以便无论您向下滚动多远,标题始终位于顶部。

我正在使用 JQuery 和 scrollTop() 函数来执行此操作。

如果不是检测 div 中的滚动条,而是检测整个窗口,这是我的代码。

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
            for(i; i < size+100; i++){
                document.getElementById('myTable').innerHTML += IPAMArray[i];
            }
            size = i;

    }
});

现在我将 div 更改为:

<div class = "tableDiv" id="myTableDiv" style="height:800px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>

我不知道如何将这一行从“文档”和“窗口”更改为正确的 div 变量:

if ($(window).scrollTop() == $(document).height() - $(window).height()){

这是我目前在该行的位置:

if ($("div.tableDiv").scrollTop() == $(document).height() - $("div.tableDiv").height()){

我尝试了很多变体,但我完全猜测代码,所以它可能需要很长时间。我更愿意通过它的 ID 而不是它的类来引用这个 div,但我刚刚开始使用类引用,因为大多数示例都是在线的。我也以各种方式尝试过 $(document).getElementById('myTableDiv') 但似乎找不到解决方案。

【问题讨论】:

  • 我认为你试图咬掉的东西比你能咀嚼的更多。如果您在接手这样的项目之前没有扎实地掌握 JavaScript 和 jQuery,那么您将在整个过程的每个部分都苦苦挣扎。我强烈建议在尝试这样的事情之前完成一些关于 JavaScript/jQuery 的初学者教程。只是我的两分钱;我认为您正在努力学习这一点:\
  • @Jason 嘿,我被侮辱了。这是一个非常具体的 javascript 参考。
  • 我的建议无意冒犯你。根据您的问题,在我看来,您对自己的 JavaScript 技能没有信心(例如“我完全在猜测代码,所以它可能需要永远”)。如果您不确定如何使用 jQuery 定位 ID,我想您并没有花太多时间使用它。我的评论不是屈尊俯就。
  • @Jason 我明白了,过去几周我一直在使用 javascript 和 ember.js 开发,所以我在创建通用网页方面非常生疏。我也没有真正过多地使用 Jquery。所以你可能是对的

标签: javascript jquery html


【解决方案1】:
if ($("#myTableDiv").scrollTop() == $("#myTable").outherHeight() - $("#myTableDiv").height()){
  1. 使用 id 来识别元素
  2. 内部元素的高度是你所需要的 ($("#myTable").height())
  3. jquery 的height() 函数不包括doc 中所述的边框边距和/或填充。请改用outherHeight()

在 css 中制作标题 position: fixed

【讨论】:

  • 这似乎不起作用。我还将顶部函数更改为 "$("#myTableDiv").scroll(function(){
  • #myTableDiv 被锁定为 800 并且 #myTableDiv 最初是 2680 并且不会改变。它永远不会平等
  • 您在 div 中使用 div。由于某种原因,我的表格短了 18 个像素。如果我这样做 if($("#myTableDiv").scrollTop() == $("#myTable").height() - $("#myTableDiv").height() +18){ 那么它就可以了。
  • hmmm... jquery 的height() 函数不包括doc 中所述的边框边距和/或填充。 outherHeight() 是你所需要的
猜你喜欢
  • 1970-01-01
  • 2010-11-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多