简介
- 如果盒子出现滚动条，那么滚动条的回占盒子宽高的一部分
例子
我们先写一个如下的代码
<head>
<style>
#wrapper{
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
hello world <br>
hello world <br>
....
</div>
</div>
</body>
效果如下
我们可以看到inner的宽度继承了父元素的宽度
出现滚动条
#wrapper{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
这个时候，我们再看一下inner的宽度
这个时候我们发现了由于滚动条占据了一部分位置，那么盒子的宽度发生了改变
滚动条宽度的计算
对于前端的一些宽度的说明，我们可以查看这个博客 点击
所以对于宽度的计算我们可以使用一下函数
const getScrollSize = ele => {
// ele为产生滚动条的元素
return ele.offsetWidth - ele.clientWidth
}
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
