判断元素是否有滚动条

2024年3月26日 128次阅读 来源: 醉中梦话

判断元素是否有滚动条

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

判断竖向滚动条

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

    原文作者：醉中梦话
    原文地址: https://segmentfault.com/a/1190000004011073
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞