拖動滾動條載入資料程式碼例項

admin發表於2017-10-27

此種效果應該不會陌生，比如本站的特效版塊就是使用的類似效果，就是當向下拖動滾動條的時候，能夠實時的載入相應的內容，這樣的話可以節省頻寬，沒有必要載入全部的內容，而是根據需要進行載入，下面通過一個簡單的例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>拖動滾動條載入資料程式碼例項-螞蟻部落</title>
<style type="text/css"> 
#father div { 
  font-size:100px; 
  background:#ccc; 
  margin-top:5px;
  text-align:center;
} 
#top{
  width:30px;
  height:1000px;
  background-color:green;
  margin:0px auto;
  text-align:center;
  color:red;
}
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var i=0;
  $(window).bind("scroll",function(event) { 
    var top=document.documentElement.scrollTop+document.body.scrollTop; 
    var textheight=$(document).height(); 
    if(textheight-top-$(window).height()<=100) { 
      if(i>=100) { 
        return; 
      } 
      i++; 
      $('<div>' + i + '</div>').appendTo($('#father')); 
    } 
  })
}) 
</script> 
</head> 
<body> 
<div id="top">螞蟻部落歡迎您，請向下拖動滾動條檢視效果</div>
<form id="form1"> 
<div id="father"> 
</div> 
</form> 
</body> 
</html>

以上程式碼實現了我們想要的功能，當向下拖動滾動條的時候，能夠實時的載入一些內容，當然在實際應用中，記載的內容一般都是從資料庫讀取的，這裡只是演示一下實現過程。下面簡單介紹一下如何實現此效果。

一.實現原理:

當向下拖動滾動條的時候，會觸發scroll事件，進而執行註冊的scroll事件處理函式，此函式可以判斷網頁底部被隱藏內容的高度，如果小於指定的高度值，就會向father元素中新增div元素，主要原理大體如此，具體可以參閱程式碼註釋自行理解。

二.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.var i=0;，宣告一個變數，將將變數的值賦值為0。

3.$(window).bind("scroll",function(){})，為視窗註冊scroll事件處理函式。

4.var top=document.documentElement.scrollTop+document.body.scrollTop，可以獲取網頁向上滾動的尺寸，使用了相容性寫法。

5.var textheight=$(document).height()，獲取網頁的高度。

6.if(textheight-top-$(window).height()<=100){}，網頁的高度減去網頁向上滾動的尺寸再減去視窗的高度，就是網頁底部被隱藏的尺寸，如果這個值小於等於100，那麼就會執行大括號中的程式碼。

7.if(i>=100){return}，如果i的值大於等於100，就取消拖動載入內容的效果。

8.i++，每次載入都會使i的值加1。

9.$('<div>' + i + '</div>').appendTo($('#father'))，向father元素中載入內容。

三.相關閱讀:

1.scroll事件可以參閱jQuery scroll事件一章節。

2.height()函式可以參閱jQuery height()方法一章節。

3.appendTo()函式可以參閱jQuery appendTo()方法一章節。

4.document.documentElement.scrollTop參閱document.documentElement.scrollTop瀏覽器相容 一章節。

相關文章