下拉滾動的實現

時間 2019-11-06

標籤下拉滾動實現简体版

原文原文鏈接

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2     <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4       <title>下拉滾動條滾到底部了嗎？</title>
 5       <script language="javascript" src="jquery-1.10.2.js"></script>
 6       <script language="javascript">
 7       $(document).ready(function (){
 8         var nScrollHight = 0; //滾動距離總長(注意不是滾動條的長度)
 9         var nScrollTop = 0;   //滾動到的當前位置
10         var nDivHight = $("#div1").height();
11 
12         $("#div1").scroll(function(){
13           nScrollHight = $(this)[0].scrollHeight;
14           nScrollTop = $(this)[0].scrollTop;
15           if(nScrollTop + nDivHight >= nScrollHight)
16             alert("滾動條到底部了");
17           });
18       });
19       </script>
20     <body>
21     <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
22       <div style="background-color:#ccc; height:750px;">IE 和 FF 下測試經過</div>
23     </div>
24     </body>
25     </html>

代碼解說：
    內部div高度爲750，外部div高度爲500，因此垂直滾動條須要滾動750-500=250的距離，就會到達底部，參見語句nScrollTop + nDivHight >= nScrollHight。
    程序中，在外部div的scroll（滾動）事件中偵測和執行if判斷語句，是很是消耗CPU資源的。用鼠標拖拉滾動條，只要有一個像素的變更就會觸發該事件。但點擊滾動條兩頭的箭頭，事件觸發的頻率會低得多。因此滾動條的scroll事件要謹慎使用。
    本示例判斷的是沒有水平滾動條的狀況，在有水平滾動條時，狀況會有細小的變化，因此nScrollTop + nDivHight >= nScrollHight語句中，須要用「>=」比較運算符，而沒有水平滾動條的時候，等號「=」就足夠了。你們能夠實際測試一下。還能夠判斷水平滾動條是否滾動到頭了。javascript

綁在windowhtml

 1 //滾動加載
 2 $(window).on('scroll', () => {
 3     this.getScrollData();
 4 });                    
 5 
 6 //滾動加載數據
 7 getScrollData (){
 8     if(this.scroll){
 9         let totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
10         if ($(document).height() <= totalheight + 200) {
11             this.scroll = false;
12             this.searchKey.limit += 20;
13             this.getTopics();
14         }
15     }
16 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。