javascript控制滾動條的位置，獲取控件的位置

一.如下是定位鼠標在視窗中的位置，先定位視窗和頁面直接的距離。   

   function getMousePoint()
       {
          var point = {x:0,y:0};
          
          // 如果瀏覽器支持 pageYOffset, 通過 pageXOffset 和 pageYOffset 獲取頁面和視窗之間的距離
          if(typeof window.pageYOffset != 'undefined') {
              point.x = window.pageXOffset;
              point.y = window.pageYOffset;
          }
          // 如果瀏覽器支持 compatMode, 並且指定了 DOCTYPE, 通過 documentElement 獲取滾動距離作為頁面和視窗間的距離
          // IE 中, 當頁面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否則 compatMode 的值是 BackCompat
          else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
              point.x = document.documentElement.scrollLeft;
              point.y = document.documentElement.scrollTop;
          }
          // 如果瀏覽器支持 document.body, 可以通過 document.body 來獲取滾動高度，如果是在ifram里面，用document.body可以獲取iframe中滾動條的位置。

          else if(typeof document.body != 'undefined') {
              point.x = document.body.scrollLeft;
              point.y = document.body.scrollTop;
          }
          // 加上鼠標在視窗中的位置
          var event=window.event?window.event:evt;
          point.x += event.clientX;
          point.y += event.clientY;
          
          // 返回鼠標在視窗中的位置
          return point;
       }      

 

 

二. js獲取控件位置

 

//獲取坐標位置
function getpos(e) {
    var t=e.offsetTop;
    var l=e.offsetLeft;
    var height=e.offsetHeight;
    while(e=e.offsetParent) {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
}

假設 obj 為某個 HTML 控件。 obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj. offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自 身的高度，整型，單位像素。
我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。
例如：

 

• <div id="tool">  
•     <input type="button" value="提交">  
•     <input type="button" value="重置">  

• </div>  

 

提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。 


offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：

一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
二、offsetTop 只讀，而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 

scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標

event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標 
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量 

以上主要指IE之中，FireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height