Rumah > Artikel > hujung hadapan web > jQuery melaksanakan penilaian bar skrol ke bottom_jquery

jQuery melaksanakan penilaian bar skrol ke bottom_jquery

WBOYasal: 2016-05-16 15:53:291091semak imbas

Untuk menentukan sama ada bar skrol mencapai bahagian bawah, anda perlu menggunakan tiga nilai atribut bagi DOM, iaitu scrollTop, clientHeight dan scrollHeight.

scrollTop ialah jarak tatal bar skrol pada paksi Y.

clientHeight ialah ketinggian kawasan kandungan yang boleh dilihat.

ScrollHeight ialah ketinggian kawasan kelihatan kandungan ditambah jarak limpahan (menatal).

Seperti yang dapat dilihat daripada pengenalan ketiga-tiga atribut ini, syarat untuk bar skrol mencapai bahagian bawah ialah scrollTop clientHeight == scrollHeight.

Tanpa berlengah lagi, mari muat naik kod dengan pantas (serasi dengan penyemak imbas yang berbeza).

lazyload.js

&#65279;
//滚动条在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) &#63; 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) &#63; 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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pengenalan kepada penggunaan perkhidmatan $http dalam AngularJSArtikel seterusnya：Pengenalan kepada penggunaan perkhidmatan $http dalam AngularJS

Artikel berkaitan

Lihat lagi