判斷元素是否有滾動條

判斷元素是否有滾動條

由於出現滾動條便意味着元素空間將大於其內容顯示區域，根據這個現象即可以獲得判斷是否出現滾動條的規則。

判斷豎向滾動條

el.scrollHeight > el.clientHeight

這條規則使用了獲取元素不一樣高度的兩個屬性：

• scrollHeight
  指的是元素的內容高度，即若是有滾動條，它的值會等於內容實際的高度加padding值（並不包含border和margin值），在沒有內容溢出的狀況下它的值等於clientHeight；

• clientHeight
  指的是元素的內部高度的px值，包括content和padding值之和，並不包括橫向滾動條（horizontal scrollbar）、border和margin的值。

故而若是每一個元素的scrollHeight值大於clientHeight值，則能夠說明其出現了豎向滾動條。

判斷橫向滾動條

el.scrollWidth > el.clientWidth

一樣這裏使用了獲取元素寬度的兩個屬性：

• scrollWidth
  指的是遠的內容高度，即它的值會等於內容實際的寬度加上padding值（不包含border和margin值），在沒有內容溢出的狀況下它的值等於clientWidth；

• clientWidth
  指的是元素的內部寬度的px值，包括content和padding值之和，並不包括橫向滾動條（horizontal scrollbar）、border和margin的值。

故而若是每一個元素的scrollWidth值大於clientWidth值，則能夠說明其出現了橫向滾動條。

兼容性

scrollWidth/scrollHeight：IE8及以上、Chrome 4.0、FireFox 3.0、Safari 4.9 和Opera均支持兼容該屬性；

clientWidth/clientWidth:IE6以上及其餘現代瀏覽器都支持該屬性。

特殊狀況

當元素指定了`overflow:hidden`時，是不會出現滾動條的，就算元素的內容尺寸超過了元素尺寸也是不會出現
滾動條的，因此這裏須要對元素是否應用了`overflow:hidden`進行判斷。

• getComputedStyle
  使用window對象下的getComputedStyle方法，能夠得到元素中最終應用的CSS屬性值，而且返回一個 CSSStyleDeclaration對象。故而咱們能夠經過如下寫法來獲取最終應用於元素上overflow的值：

window.getComputedStyle(el).getPropertyValue("overflow")

• currentStyle
  鑑於getComputedStyleIE9如下不支持，故而這裏須要使用IE中特有的currentStyle來獲取最終應用於元素中的overflow屬性值：

el.currentStyle.overflow

總結

綜上能夠得出判斷元素出現滾動條方法的代碼，以下：

function hasScrolled(el, direction = "vertical") {
    if(direction === "vertical") {
        return el.scrollHeight > el.clientHeight;
    }else if(direction === "horizontal") {
        return el.scrollWidth > el.clientWidth;
    }
 }

在線Demo：http://codepen.io/willshawzq/pen/PPVdNX

參考文檔

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth