判斷元素是否有滾動(dòng)條

sshe 發(fā)布于2019-08-01 14:55 / 2707人閱讀

摘要：判斷元素是否有滾動(dòng)條因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。

判斷元素是否有滾動(dòng)條

因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。

判斷豎向滾動(dòng)條

el.scrollHeight > el.clientHeight

這條規(guī)則使用了獲取元素不同高度的兩個(gè)屬性：

scrollHeight
指的是元素的內(nèi)容高度，即如果有滾動(dòng)條，它的值會等于內(nèi)容實(shí)際的高度加padding值（并不包含border和margin值），在沒有內(nèi)容溢出的情況下它的值等于clientHeight；

clientHeight
指的是元素的內(nèi)部高度的px值，包括content和padding值之和，并不包括橫向滾動(dòng)條（horizontal scrollbar）、border和margin的值。

故而如果每個(gè)元素的scrollHeight值大于clientHeight值，則可以說明其出現(xiàn)了豎向滾動(dòng)條。

判斷橫向滾動(dòng)條

el.scrollWidth > el.clientWidth

同樣這里使用了獲取元素寬度的兩個(gè)屬性：

scrollWidth
指的是遠(yuǎn)的內(nèi)容高度，即它的值會等于內(nèi)容實(shí)際的寬度加上padding值（不包含border和margin值），在沒有內(nèi)容溢出的情況下它的值等于clientWidth；

clientWidth
指的是元素的內(nèi)部寬度的px值，包括content和padding值之和，并不包括橫向滾動(dòng)條（horizontal scrollbar）、border和margin的值。

故而如果每個(gè)元素的scrollWidth值大于clientWidth值，則可以說明其出現(xiàn)了橫向滾動(dòng)條。

兼容性

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

clientWidth/clientWidth:IE6以上及其他現(xiàn)代瀏覽器都支持該屬性。

特殊情況

   當(dāng)元素指定了`overflow:hidden`時(shí)，是不會出現(xiàn)滾動(dòng)條的，就算元素的內(nèi)容尺寸超過了元素尺寸也是不會出現(xiàn)
滾動(dòng)條的，所以這里需要對元素是否應(yīng)用了`overflow:hidden`進(jìn)行判斷。

getComputedStyle
使用window對象下的getComputedStyle方法，可以獲得元素中最終應(yīng)用的CSS屬性值，并且返回一個(gè) CSSStyleDeclaration對象。故而我們可以通過以下寫法來獲取最終應(yīng)用于元素上overflow的值：

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

currentStyle
鑒于getComputedStyleIE9以下不支持，故而這里需要使用IE中特有的currentStyle來獲取最終應(yīng)用于元素中的overflow屬性值：

el.currentStyle.overflow

總結(jié)

綜上可以得出判斷元素出現(xiàn)滾動(dòng)條方法的代碼，如下：

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