快捷導(dǎo)航

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

更新時間：2014年11月20日 10:14:28 投稿：shichen2014

這篇文章主要介紹了js判斷滾動條是否已到頁面最底部或頂部的原理與方法,以實例的形式詳細分析了js實現(xiàn)返回頂部功能所涉及的各種技巧,并對相關(guān)知識點進行了總結(jié)歸納,需要的朋友可以參考下

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

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

當(dāng)可視區(qū)域小于頁面的實際高度時，判定為出現(xiàn)滾動條，即：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

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

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

復(fù)制代碼代碼如下:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

//執(zhí)行相關(guān)腳本。

}

還有，這里要搞清楚，上面這代碼是判斷橫向滾動條的，我們一般要判斷的是縱向滾動，代碼如下：

復(fù)制代碼代碼如下:

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

//執(zhí)行相關(guān)腳本。

}

判斷滾動條是否已拉到頁面最底部，可以用如下代碼

復(fù)制代碼代碼如下:

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<=0) {

//do something

}

}

示例2

在網(wǎng)上找的。還挺兼容瀏覽器的。奇怪的是我在文檔里面沒找到相關(guān)信息。代碼貼出來吧。

復(fù)制代碼代碼如下:

/********************
* 取窗口滾動條高度
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}

/********************
* 取窗口可視范圍的高度
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }
    else
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }
    return clientHeight;
}
/********************
* 取文檔內(nèi)容實際高度
*******************/
function getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("到達底部");
}else{
alert("沒有到達底部");
}
}

補充：

DTD已聲明:

IE
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度 ,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內(nèi)容高度

FF
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度 ,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內(nèi)容高度

Chrome
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度， document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight 瀏覽器所有內(nèi)容高度

DTD未聲明:

IE
document.documentElement.scrollHeight 瀏覽器可視部分高度，document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 始終為0，document.body.clientHeight 瀏覽器可視部分高度

FF
document.documentElement.scrollHeight 瀏覽器可視部分高度, document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器所有內(nèi)容高度，document.body.clientHeight 瀏覽器可視部分高度

Chrome
document.documentElement.scrollHeight 瀏覽器可視部分高度,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器所有內(nèi)容高度，document.body.clientHeight 瀏覽器可視部分高度

瀏覽器所有內(nèi)容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和

瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。
看懂了上面的參數(shù)我們就可以做出兼容ie,ff,chrome瀏覽器的滾動效果了。

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: