判斷元素是否有滾動條

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

判斷豎向滾動條

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

本文轉載於:猿2048➣https://www.mk2048.com/blog/blog.php?id=hib2ibiibaa