判断元素是否有滚动条

判断元素是否有滚动条

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

判断竖向滚动条

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞