判断元素是否有滚动条

判断元素是否有滚动条

今天遇到了一个业务场景,需要判断是否有滚动条的出现.
判断规则:
因为出现滚动条便意味着元素空间将大于其内容显示区域,根据这个现象便可以得到判断是否出现滚动条的规则.

判断竖向滚动条

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,则可以说明其出现了横向滚动条.

猜你喜欢

转载自blog.csdn.net/pink_cz/article/details/126939519
今日推荐