查詢視窗滾動條的位置和視口尺寸

元素的位置是以畫素來度量的，有兩個不同的點作為座標系的原點：

文件的左上角

在其中顯示文件的視口的左上角

在頂級視窗和標籤頁中，視口只是實際顯示文件內容的瀏覽器的一部分：他不包括瀏覽器的「外殼」（如選單、工具欄和標籤頁）。針對框架頁中顯示的文件，視口是定義了框架頁的元素。

無論在何種情況下，當討論元素的位置時，必須弄清楚所使用的座標是文件座標還是視口座標（或者是視窗座標）。

先使用比較新的屬性scrollingelement：scrollingelement （ document 的唯讀屬性）返回滾動文件的 element 物件的引用。在標準模式下, 這是文件的根元素, document.documentelement。當在怪異模式下， scrollingelement 屬性返回 html body 元素（若不存在返回 null ）。

// 查詢視窗的滾動條位置
function
getscroll
(w)}

或者是window物件的pagexoffset和pageyoffset屬性（ie8及以下不相容）：

// 查詢視窗的滾動條位置
function
getscroll
(w);
}

但是我們有時也要考慮瀏覽器的相容性：

// 查詢視窗的滾動條位置
function
getscrolloffsets
(w);
}// 對標準模式下的ie（或任何瀏覽器）
var d = w.document;
if(document.compatmode == "css1compat");
}// 怪異模式下的瀏覽器
return ;
}

// 查詢視窗的視口尺寸
function
getviewportsize
(w);
}// 對標準模式下的ie（或任何瀏覽器）
var d = w.document;
if(document.compatmode == "css1compat");
}// 怪異模式下的瀏覽器
return ;
}

不過innerwidth/innerheight和clientwidth/clientheight的返回結果是不同的，先看一張圖

從圖中可以看出兩者的差距就在於當有滾動條的時候，innerwidth/innerheight包括滾動條的寬度，而clientwidth/clientheight不包括滾動條的寬度。

HTML 隱藏滾動條和去除滾動條的方法

1.html 標籤加屬性 xml html code複製內容到剪貼簿 htmllang en class no ie style overflow hidden 2.body中加入以下 xml html code複製內容到剪貼簿 styletype text css html html頁面去除滾動條...

CSS定義網頁滾動條和去掉滾動條的方法

一滾動條樣式主要涉及到如下css屬性 overflow屬性檢索或設定當物件的內容超過其指定高度及寬度時如何顯示內容 overflow auto 在需要時內容會自動新增滾動條 overflow scroll 總是顯示滾動條 overflow x hidden 禁止橫向的滾動條 overflow y...

查詢視窗滾動條的位置和視口尺寸

HTML 隱藏滾動條和去除滾動條的方法

CSS定義網頁滾動條和去掉滾動條的方法

CSS定義網頁滾動條和去掉滾動條的方法

相關推薦