ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはスクロールバーの判定をbottom_jqueryに実装します

jQueryはスクロールバーの判定をbottom_jqueryに実装します

WBOY
WBOYオリジナル
2016-05-16 15:53:291115ブラウズ

スクロール バーが一番下に達するかどうかを判断するには、DOM の 3 つの属性値、つまり、scrollTop、clientHeight、scrollHeight を使用する必要があります。

scrollTop は、Y 軸上のスクロール バーのスクロール距離です。

clientHeight は、コンテンツの表示領域の高さです。

ScrollHeight は、コンテンツの表示領域の高さにオーバーフロー (スクロール) 距離を加えたものです。

これら 3 つの属性の導入からわかるように、スクロール バーが一番下に到達する条件は、scrollTop clientHeight ==scrollHeight です。

早速、コードをアップロードしてみましょう (さまざまなブラウザーと互換性があります)。

lazyload.js


//滚动条在Y轴上的滚动距离 
 function getScrollTop(){
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
} 
 //文档的总高度 
 function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
} 
 //浏览器视口的高度 
 function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
} 
 window.onscroll = function(){
  if(getScrollTop() + getWindowHeight() == getScrollHeight()){
    alert("you are in the bottom!");
  }
};

lazyload-jQuery.js

$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollTop + windowHeight == scrollHeight){
    alert("you are in the bottom");
  }
});

lazyLoad.html

<!doctype html>
<html lang="en" style="height:900px;">
 <head>
 <meta charset="UTF-8">
 <meta name="Author" content="forever">
 <link rel="stylesheet" href="css/lazyload.css" />
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 <title>lazyLoad</title>
 <script type="text/javascript">
   
  $(function(){
    var $ul=$("#lazyLoadWrap").find("ul");
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
       if(scrollTop + windowHeight == scrollHeight){
          for(var i=0;i<6;i++){
            $ul.append("<li>Hello</li>");
          }
       }
    });
  });
 </script>
 </head>
 <body>
  <div id="lazyLoadWrap">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li>12</li>
    </ul>
  </div>
 </body>
</html>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。