javascript判斷滾動條滾動位置的實例程式碼詳解
- 伊谢尔伦原創
- 2017-07-19 16:06:161026瀏覽
我們常常會看到很多的網站一個返回頂部效果就是當我們滾動條到指定位置時返回頂部出來了，否則就自動隱藏了，下面就來給大家介紹這種效果實現原理與方法。
當視覺區域小於頁面的實際高度時，判定為出現捲軸，即：
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){
//执行相关脚本。
}判斷捲軸是否已拉到頁面最底部，可以用以下程式碼
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
在網路上找的。還挺相容瀏覽器的。奇怪的是我在文件裡面沒找到相關資訊。代碼貼出來吧。
/********************
* 取窗口滚动条高度
******************/
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;
}
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("到达底部");
}else{
alert("没有到达底部");
}
}以上是javascript判斷滾動條滾動位置的實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn