本文實例講述了js判斷滾動條是否已到頁面最底部或頂部的方法。分享給大家供大家參考。具體分析如下:
我們經常會看到很多的網站一個返回頂部效果就是當我們滾動條到指定位置時返回頂部出來了,否則就自動隱藏了,下面就來給大家介紹這種效果實現原理與方法。
當可視區域小于頁面的實際高度時,判定為出現滾動條,即:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
要使用 document.documentElement ,必須在頁面頭部加入聲明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其實,這段代碼是不起作用的,因為他沒考慮到一個問題,就是瀏覽器的邊框,當我們在獲取頁面的offsetHeight高度時是包括了瀏覽器的邊框的,瀏覽器的邊框是2個像素,所以這時無論在任何情況下clientHeight 始終是小于offsetHeight的,這就使得即使沒有滾動條它也為true,因此我們要修正這個錯誤,代碼應該這樣改,在offsetHeight上減去4個像素,即:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//執行相關腳本。
}
還有,這里要搞清楚,上面這代碼是判斷橫向滾動條的,我們一般要判斷的是縱向滾動,代碼如下:
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//執行相關腳本。
}
判斷滾動條是否已拉到頁面最底部,可以用如下代碼