判断元素是否有滚动条

星期六, 2017-10-07 22:06 — adminshiping1

因为出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则。

判断竖向滚动条

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;
    }
 }