快捷導(dǎo)航

js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

}

判斷滾動(dòng)條是否已拉到頁(yè)面最底部，可以用如下代碼

復(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)上找的。還挺兼容瀏覽器的。奇怪的是我在文檔里面沒(méi)找到相關(guān)信息。代碼貼出來(lái)吧。

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

/********************
* 取窗口滾動(dòng)條高度
******************/
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)容實(shí)際高度
*******************/
function getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("到達(dá)底部");
}else{
alert("沒(méi)有到達(dá)底部");
}
}

補(bǔ)充：

DTD已聲明:

IE
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度 ,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 瀏覽器滾動(dòng)部分高度，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 瀏覽器滾動(dòng)部分高度，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 瀏覽器滾動(dòng)部分高度
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 瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight 始終為0，document.body.clientHeight 瀏覽器可視部分高度

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

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

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

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

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

您可能感興趣的文章: