判断元素是否有滚动条

rose 发布于2019-08-21 10:48 / 2273人阅读

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

判断元素是否有滚动条

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

判断竖向滚动条

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

云服务器 GPU云服务器 js判断滚动条的高度 js 判断是否有字段如何判断是否有cdn加速 js判断json是否有数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86225.html

判断元素是否有滚动条

摘要：判断元素是否有滚动条因为出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则。判断元素是否有滚动条因为出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则。判断竖向滚动条 el.scrollHeight > el.clientHeight 这条规则使用了获取元素不同高度的两个属性： scroll...

sshe 2019-08-01 14:55 评论0 收藏0
如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

jayzou 2019-08-23 13:43 评论0 收藏0
如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

xiguadada 2019-08-02 12:06 评论0 收藏0
如何判断元素是否在可视区域ViewPort

摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

zhigoo 2019-08-29 17:24 评论0 收藏0