js判斷滾動條是否已到頁面最底部或頂部實例_javascript技巧

本文實例講述了js判斷捲軸是否已到頁面最底部或頂部的方法。分享給大家供大家參考。具體分析如下：

我們常常會看到很多的網站一個返回頂部效果就是當我們滾動條到指定位置時返回頂部出來了，否則就自動隱藏了，下面就來給大家介紹這種效果實現原理與方法。

當可視區域小於頁面的實際高度時，判定為出現捲軸，即：

複製程式碼 程式碼如下:

if (document.documentElement.clientHeight
要使用 document.documentElement ，必須在頁面頭部加入聲明：

複製代碼 代碼如下:

 
其實，這段程式碼是不起作用的，因為他沒考慮到一個問題，就是瀏覽器的邊框，當我們在獲取頁面的offsetHeight高度時是包括了瀏覽器的邊框的，瀏覽器的邊框是2個像素，所以這時無論在任何情況下clientHeight 始終是小於offsetHeight的，這就使得即使沒有滾動條它也為true,因此我們要修正這個錯誤，代碼應該這樣改，在offsetHeight上減去4個像素，即：

複製程式碼 程式碼如下:

if (document.documentElement.clientHeight //執行相關腳本。
}

還有，這裡要搞清楚，上面這程式碼是判斷橫向捲軸的，我們一般要判斷的是縱向捲動，程式碼如下：

複製程式碼複製程式碼

程式碼如下:

if (document.documentElement.clientWidth //執行相關腳本。 }

判斷捲軸是否已拉到頁面最底部，可以用以下程式碼 複製程式碼

程式碼如下:

window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot //do something

} }

範例2

在網路上找的。還挺相容瀏覽器的。奇怪的是我在文件裡面沒找到相關資訊。代碼貼出來吧。 複製程式碼

程式碼如下:

/********************
* 取視窗捲軸高度
******************/
函數 getScrollTop()
{
    varscrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    返回頂部滾動；
}

/********************
* 取視窗可視範圍的高度
*******************/
函數 getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    其他
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    返回客戶端高度；
}
/********************
* 取文檔內容實際高度
*******************/
函式 getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  函數測試(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  Alert("底部到達");
 }其他{
  Alert("沒有到達底部");
 }
}

Tambahan:

DTD mengisytiharkan:

IE
document.documentElement.scrollHeight Ketinggian semua kandungan dalam penyemak imbas, document.body.scrollHeight Ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop Ketinggian bahagian skrol penyemak imbas, document.body.scrollTop sentiasa 0
document.documentElement.clientHeight Ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.clientHeight Ketinggian semua kandungan dalam penyemak imbas

FF
document.documentElement.scrollHeight Ketinggian semua kandungan dalam penyemak imbas, document.body.scrollHeight Ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop Ketinggian bahagian skrol penyemak imbas, document.body.scrollTop sentiasa 0
document.documentElement.clientHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.clientHeight ialah ketinggian semua kandungan dalam penyemak imbas

Chrome
document.documentElement.scrollHeight ialah ketinggian semua kandungan dalam penyemak imbas, document.body.scrollHeight ialah ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop sentiasa 0, document.body.scrollTinggi atas bahagian menatal penyemak imbas
document.documentElement.clientHeight Ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.clientHeight Ketinggian semua kandungan dalam penyemak imbas

DTD tidak diisytiharkan:

IE
document.documentElement.scrollHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.scrollHeight ialah ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop sentiasa 0, document.body.scrollTinggi atas bahagian menatal penyemak imbas
document.documentElement.clientHeight sentiasa 0, document.body.clientHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat

FF
document.documentElement.scrollHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.scrollHeight ialah ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop sentiasa 0, document.body.scrollTop ialah ketinggian bahagian menatal penyemak imbas
document.documentElement.clientHeight ialah ketinggian semua kandungan dalam penyemak imbas, document.body.clientHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat

Chrome
document.documentElement.scrollHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat, document.body.scrollHeight ialah ketinggian semua kandungan dalam penyemak imbas
document.documentElement.scrollTop sentiasa 0, document.body.scrollTop ialah ketinggian bahagian menatal penyemak imbas
document.documentElement.clientHeight ialah ketinggian semua kandungan dalam penyemak imbas, document.body.clientHeight ialah ketinggian bahagian penyemak imbas yang boleh dilihat

Ketinggian semua kandungan dalam penyemak imbas ialah ketinggian keseluruhan bingkai penyemak imbas, termasuk jumlah ketinggian bahagian tempat bar skrol dilancarkan, bahagian yang boleh dilihat dan bahagian tersembunyi di bahagian bawah

Ketinggian bahagian pelayar yang ditatal ialah ketinggian bar skrol, iaitu ketinggian bahagian atas visual dari bahagian atas keseluruhan objek.
Selepas memahami parameter di atas, kami boleh mencipta kesan tatal yang serasi dengan pelayar IE, FF dan Chrome.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.