js判斷滾動條是否已到頁面最底部或頂部實例
本文實例講述了js判斷滾動條是否已到頁面最底部或頂部的方法。分享給大家供大家參考。具體分析如下：
我們經(jīng)常會看到很多的網(wǎng)站一個返回頂部效果就是當(dāng)我們滾動條到指定位置時返回頂部出來了，否則就自動隱藏了，下面就來給大家介紹這種效果實現(xiàn)原理與方法。
當(dāng)可視區(qū)域小于頁面的實際高度時，判定為出現(xiàn)滾動條，即：
要使用 document.documentElement ，必須在頁面頭部加入聲明：
其實，這段代碼是不起作用的，因為他沒考慮到一個問題，就是瀏覽器的邊框，當(dāng)我們在獲取頁面的offsetHeight高度時是包括了瀏覽器的邊框的，瀏覽器的邊框是2個像素，所以這時無論在任何情況下clientHeight 始終是小于offsetHeight的，這就使得即使沒有滾動條它也為true,因此我們要修正這個錯誤，代碼應(yīng)該這樣改，在offsetHeight上減去4個像素，即：
//執(zhí)行相關(guān)腳本。
}
還有，這里要搞清楚，上面這代碼是判斷橫向滾動條的，我們一般要判斷的是縱向滾動，代碼如下：
//執(zhí)行相關(guān)腳本。
}
判斷滾動條是否已拉到頁面最底部，可以用如下代碼
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)信息。代碼貼出來吧。
* 取窗口滾動條高度
******************/
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("到達(dá)底部");
}else{
alert("沒有到達(dá)底部");
}
}
補充：
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è)計有所幫助。
相關(guān)文章
其實為js文件傳參是很久就接觸過的一個問題，只是一直沒有放在心上，今天在無憂看到又有人問這個問題，今日總結(jié)一下。2010-05-05
cookie的大小是受限制的，并且每次請求cookie都會被發(fā)送，浪費寬帶，cookie還需要指定作用域，不可以跨域調(diào)用。cookie的作用是與服務(wù)器進(jìn)行交互，作為http規(guī)范的一部分存在，而webstorage僅僅是為了本地“存儲”數(shù)據(jù)而生。2023-07-07
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實例,需要的朋友可以參考下2015-06-06
JS一分鐘在github+Jekyll的博客中添加訪問量功能的實現(xiàn)
這篇文章主要介紹了JS一分鐘在github+Jekyll的博客中添加訪問量功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
本篇文章是對在JS中Map和List的簡單實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
今天在為網(wǎng)站增加一些代碼功能的時候，需要用到if條件判斷，發(fā)現(xiàn)簡寫方法忘了，這里特整理下2014-05-05
這篇文章主要為大家詳細(xì)介紹了H5+css3+js搭建帶驗證碼的登錄頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
JS封裝cookie操作函數(shù)實例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實例形式分析了JavaScript實現(xiàn)針對cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
asp.net+js 實現(xiàn)無刷新上傳解析csv文件的代碼
無刷新上傳解析csv文件的實現(xiàn)代碼，需要的朋友可以參考下。2010-05-05
這篇文章主要介紹了BootStrap selectpicker 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06