js melaksanakan bar skrol untuk menatal ke bahagian bawah halaman dan meneruskan kemahiran loading

js melaksanakan bar skrol untuk menatal ke bahagian bawah halaman dan meneruskan kemahiran loading_javascript

WBOY

Lepaskan： 2016-05-16 15:24:38

asal

1707 orang telah melayarinya

Contoh ini harus dikatakan sangat mudah, dan ia juga boleh diproses terus menggunakan kaedah jQuery. Walau bagaimanapun, lapisan bawah artikel ini diproses menggunakan js asli Jika anda menemui beberapa titik pengetahuan kecil, anda boleh menganalisisnya dan ia akan berbaloi.

Prinsipnya sangat mudah, cuma tambahkan acara tatal pada tetingkap Setiap kali penyemak imbas mencetuskan acara tatal, ia akan menentukan sama ada ia telah menatal ke bahagian bawah penyemak imbas, dan jika ia. mencapai bahagian bawah, muatkan data baharu. Perkara utama ialah mengira sama ada bar skrol telah menatal ke bahagian bawah penyemak imbas Algoritma adalah seperti berikut

Ketinggian tetingkap digulung bar tatal> Jumlah ketinggian dokumen ialah 50/*Saya akan mengambil ketinggian kawasan tindak balas menatal kepada 50px*/ jika ini penghakiman adalah benar, kemudian Menunjukkan bahawa bar skrol telah menatal ke bawah.

Contoh

  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }

Salin selepas log masuk

Dapatkan fungsi ketinggian bergulung pada bahagian atas halaman

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }

Salin selepas log masuk

Penyemak imbas Chrome dan Firefox/IE mempunyai pemahaman yang berbeza sama ada bar skrol kepunyaan badan atau html, menghasilkan pemprosesan yang berbeza.

Dapatkan jumlah ketinggian dokumen halaman

 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

Salin selepas log masuk

Algoritma ini konsisten dengan kaedah jQuery untuk mengira ketinggian dokumen.

Dapatkan ketinggian port pandangan penyemak imbas halaman

 function windowHeight(){
  return (document.compatMode == "CSS1Compat")&#63;
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }

Salin selepas log masuk

Apa yang perlu dijelaskan di sini ialah document.compatMode. Ia sangat pelik, dan nampaknya saya tidak pernah menemuinya secara umum.

Document.compatMode mempunyai dua nilai: "BackCompat" dan "CSS1Compat". Penjelasan rasmi ialah BackCompat: Mod keserasian standard dimatikan. CSS1Compat: Mod keserasian standard dihidupkan.
Paparan model kotak IE sangat berbeza antara Mod Standard dan Mod Quirks Tafsiran model kotak dalam Mod Standard adalah sama seperti pelayar standard lain, tetapi terdapat perbezaan besar dalam Mod Quirks Tanpa mengisytiharkan Doctype, IE lalai kepada Mod Quirks.
Berikan satu contoh untuk menggambarkan perbezaan antara kedua-dua mod.

Apabila document.compatMode adalah sama dengan "BackCompat", lebar kawasan klien penyemak imbas ialah document.body.clientWidth

Apabila document.compatMode adalah sama dengan CSS1Compat, lebar kawasan klien penyemak imbas ialah document.documentElement.clientWidth.

Terdapat atribut lain yang serupa. Saya tidak akan pergi ke butiran di sini, tetapi kita boleh meramalkan bahawa kedua-dua mod akan menyebabkan asas pemaparan IE berubah Anda boleh bayangkan betapa berbezanya bangunan yang dibina.

Jadi sila nyatakan Doctype untuk setiap halaman bukan sahaja tabiat yang baik, tetapi juga proses yang perlu. Mod Quirks boleh masuk ke dalam tong sampah.

Ok, inilah kod lengkapnya, dengan contoh kecil (tiada muat semula data di latar belakang, hanya bar menunggu)

<!DOCTYPE html>
<html lang="ch-cn">
 <head>
　　<meta charset="utf-8">
　　<script type="text/javascript" src='jquery-1.9.1.js'></script>
  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
 </head>
 <body style="background:#ff0;height:1000px;">
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 </body>
 <script type="text/javascript">

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }
 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //获取页面浏览器视口的高度
 function windowHeight(){
  //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
  return (document.compatMode == "CSS1Compat")&#63;
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }
 </script>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }
 </script> 
</html>

Salin selepas log masuk

Gambar bar memuatkan di dalam

ialah

Di atas adalah contoh cara untuk menatal ke bahagian bawah halaman dan terus memuatkan saya harap ia akan membantu pembelajaran semua orang.