码迷,mamicode.com
首页 > 其他好文 > 详细

判断元素是否有滚动条

时间:2020-08-20 19:09:25      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:add   不包含   高度   scroll   情况下   显示   规则   attribute   出现   

技术图片

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


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

判断元素是否有滚动条

标签:add   不包含   高度   scroll   情况下   显示   规则   attribute   出现   

原文地址:https://www.cnblogs.com/ubuntu2004/p/13524428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!