判断元素是否有滚动条

逻辑玄铁探
• 阅读 1943

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


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

原文:https://blog.csdn.net/weixin_33834075/article/details/89454147

点赞
收藏
评论区
推荐文章
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
晴空闲云 晴空闲云
4年前
JavaScript用Element Traversal新属性遍历子元素
之前遍历子元素可以用childNodes属性或者firstChild进行遍历,但是要判断子元素是否是ELement元素。后来W3C通过ElementTraversal规定定义了一组新的属性来进行遍历,就不用判断了,非常方便。childNodes属性遍历遍历子元素通常是通过childNodes属性进行遍历,但是这个属性会包含空白节点,如果只是要遍历Elem
Wesley13 Wesley13
4年前
JS之滚动条效果2
在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动。!(https://oscimg.oschina.net/oscnet/c64767294c846f5a670e95fe57384474d3d.png)下面针对要实现的效果进行分析:首先是页面
Stella981 Stella981
4年前
Hbuilder 云端打包app微信分享功能源码示例
<scripttype"text/javascript"mui('.muiscrollwrapper').scroll({indicators:true//是否显示滚动条});varsharesnull;mui.plusReady(function(){vararticle\_idplus.webvie
Stella981 Stella981
4年前
JavaScript中判断数组是否包含某个元素
javascript的Array没有contains方法,有时候这会不方便,contains方法实现很简单可以扩展Array类,如下:写法1.Array.prototype.containsfunction(obj){varithis.length;while(i){
Stella981 Stella981
4年前
Ace 2.1.3
Acev2.1.3是一个响应迅速,易于使用且功能丰富的管理模板,基于Bootstrap4它干净且结构良好,无论是否由Ruby,PHP,ASP.NET等驱动,都可以轻松与您的应用程序集成有:具有多个自定义选项的多个侧边栏和导航栏主题前端登陆页面自定义元素,例如:侧面和滑块复选框和开关滚动条档案输入适用于移动设备的下拉菜单滑动移动
Stella981 Stella981
4年前
Python中tkinter中控件的使用(11,text文本框)
importtkinterwintkinter.Tk()win.title("text文本框")win.geometry("300x50600100")如果有窗体属性时滚动条只会显示上下,而不会有拖拉条'''文本控件,用于显示多行文本width行大小height垂直显示行数'''创建滚动条scrolltkinter.
Easter79 Easter79
4年前
Tcl命令操作实验
字符串操作:stringoptionstring1string2其中option可以是:compare 按字母顺序比较,小于则返回1,等于返回0,大于返回1match 判断是否匹配first判断string2中string1第一次出现的位置,如果没有则返回1last 和first作用相反,最后一次出现的位置,如果没有则返回
Wesley13 Wesley13
4年前
MFC 控件编程之水平滚动条跟垂直滚动条
        MFC控件编程之水平滚动条跟垂直滚动条一点水平滚动条的操作  首先在操作滚动条的时候.我们要知道滚动条的一些属性.比如我们要设置最大值最小值.以及每次递增的值是多少.都要设置.所有就有一个结构.专门存储了滚动条信息.而我们在对话框一启动就要
Stella981 Stella981
4年前
HTML+CSS实现div的高度自适应填满剩余空间的7种方法
如图上下两部分,上面部分适应内容的高度,下面部分填充剩余部分。!(https://static.oschina.net/uploads/space/2018/0516/122621_xFRz_818899.png)当下面内容不够时,在下面部分出现滚动条!(https://static.oschina.net/uploads/space/201
达里尔 达里尔
1年前
滚动条样式美化
滚动条样式优化