JQuery判断子元素是否滚动到父元素底部？

JQuery判断子元素是否滚动到父元素底部？

判断原理：已经滚动的高度 + 父元素的高度 >= 子元素的整体高度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>判断子元素是否滚动到父元素底部？</title>
  <script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
  <body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div id="div2" style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
    </div>
    <script language="javascript">
      $(function (){
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)等于子元素的整体高度
        var nScrollTop = 0;  //滚动到的当前位置(是已经滚动的高度)
        var nDivHight = $("#div1").height(); //父元素的高度
        $("#div1").scroll(function(){
          nScrollHight = $(this)[0].scrollHeight;
          nScrollTop = $(this)[0].scrollTop;
          console.log("nScrollTop",nScrollTop);
          console.log("nScrollHight",nScrollHight);
          if(nScrollTop + nDivHight >= nScrollHight)
            alert("滚动条到底部了");
        });
      })
    </script>
  </body>
</html>

　　

posted @ 2021-12-31 15:13  挥不去的执念  阅读(222)  评论(0)    收藏  举报