jquery 当滚动条在底部-jQuery 检查滚动条是否到达顶部

1. jQuery检查浏览器窗口滚动条是否到达顶部

jQuery获取位置和规格相关的函数：

$(document).height() 获取整个页面的高度

$(window).height() 获取浏览器可以看到的页面当前部分的高度。这个大小会在您调整浏览器窗口大小时发生变化，并且与文档不同。

scrollTop() 获取匹配元素相对于滚动条底部的偏转。

scrollLeft() 获取匹配元素相对于滚动条两侧的偏转。

滚动条发生变化时scroll([[data],fn])违反了滚动问题

jQuery 检查滚动条到达顶部代码：

$(document).ready(function() {
  $(window).scroll(function() {
 
    if ($(document).scrollTop()= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
  });
});

2. jQuery检查div中的滚动条是否到达顶部

文章前半部分介绍了 jQuery 来检查浏览器窗口滚动条是否到达顶部。 虽然scrollTop和scrollHeight的概念还不太明白，但是滚动条一般都是放在div中的。

以下测量 id 为scroll_div的滚动条到达顶部的情况：

      

        来自于www.nhooo.com面圈教程

        来自于www.nhooo.com面圈教程

        来自于www.nhooo.com面圈教程

      
    

首先，你需要了解几个概念：

scrollHeight：表示滚动条需要滚动的高度，即内部div，10000px

scrollTop：表示滚动条的高度jquery 当滚动条在底部，可能小于外层div500px

也就是说scrollDiv的高度+scrollTop的最大高度=scrollHeight

所以检查div中div滚动条的高度很简单：

$(document).ready(function() {
  $("#scroll_div").scroll(function(){
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      alert("到达底部了");
    }
  });
});

如果是异步加载数据jquery 当滚动条在底部，数据加载不完全，违反了同一个页面的数据加载请求，我一般会加一个flag。

$(document).ready(function() {
  var flag = false;
  $("#scroll_div").scroll(function(){
    
    if(flag){
      //数据加载中
      return false;
    }
    
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      //请求数据
      flag = true;
      alert("到达底部了");
    }
  });
});