一 scroll系列屬性      ——滾動         1 scrollHeight/scrollWidth 標籤內部實際內容的高度/寬度        ele.scrollHeight 有兩種情況，                當內容超出盒子範圍後，返回的是內容的高度，包括padding，從頂部內側到內容的最外部分。                當內容不超出盒子範圍時，返回的是盒子的高度，就是 ele.scrollHeight == ele.clientHeight,最小值就是ele.clientHeight        ele.scrollWidth 情況同 ele.scrollHeight一樣。               當內容超出盒子範圍後，返回的是內容的寬度，包括padding，從左邊內側到內容的最外部分。                當內容不超出盒子範圍時，返回的是盒子的寬度，就是 ele.scrollWidth == ele.clientWidth,最小值就是ele.clientHeight        各個瀏覽器說法不一：            IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。            NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。         2 scrollTop／scrollLeft

        ele.scrollTop  滾動時返回的是被捲去部分的頂部到可視區域的頂部，看圖         ele.scrollLeft  滾動時返回的是被捲去部分的左側到可視區域的左側，看圖        函式封裝    ----獲取捲曲的寬度和高度    　　

function myScroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0　　
     }
}

   　　 eg：document.documentElement-----html標籤    　　　　document.body            ------body內部             ps！ 想要實時獲取頁面捲曲的高度或寬度，必須在事件內進行    window.onscroll = function(){}        3 scrollTo

       window.scrollTo(1500,2000);//引數1 表示橫向滾動到的位置 //引數2 表示縱向滾動到的位置 二 client系列屬性        ——可視        
    1.  clientWidth／clientHeight          ele.clientWidth 返回元素內部空間的寬度（width+padding）,是一個只讀屬性。不包含border和margin以及縱向滾動條。        (ele.clientWidth = width + padding - 滾動條的高度)        ele.clientHeight 返回元素內部空間的高度（height+padding）,是一個只讀屬性。不包含border和margin以及橫向滾動條。        (Ele.clientHeight = height + padding - 滾動條的寬度)     @ 和offsetWidth／offsetHeight 的區別：        offsetWidth包含border，而clientWidth不包含border。        scrollHeight的最小值和clientHeight相同     2  clientTop／clientLeft          ele.clientTop 表示一個元素的左邊框的寬度，以畫素表示。是一個只讀屬性             如果元素的文字方向是從右向左（RTL, right-to-left），並且由於內容溢位導致左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度（預設17px）。             clientLeft 不包括左外邊距和左內邊距            （ele.clientLeft = border-left-width + 滾動條的寬度）         ele.clientLeft 一個元素頂部邊框的寬度（以畫素表示）。不包括頂部外邊距或內邊距。        （ele.clientTop = border-top-width）    函式封裝：

function myClient() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    }
}

 

三  offset系列的屬性                            

相關推薦