文章通过一个水平滚动条的例子解释了CSS中的overflow-x属性如何控制滚动条的出现。当box2的宽度超过box1时，滚动条显示，且滚动条占据box1内部空间。使用border-box盒模型时，滚动条占用宽度。即使隐藏滚动条，仍可通过鼠标操作滚动内容。此外，文章提及el-select下拉框中控制滚动条显示的策略，即高度固定，超出时出现滚动条。
分析
为了看懂el-scrollbar的滚动条，先看一个水平滚动条的示例：一个box1里面套了一个box2，其中box2的宽度和box2的宽度相等，这种情况下，box1在水平方向上是没有滚动条的（box1使用了overflow-x:auto）。
如图：
对应代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
.box1 {
margin: 20px auto;
width: 300px;
height: 300px;
background-color: #ddd;
padding-top: 20px;
overflow-x: auto;
}
.box2 {
width: 300px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
现在把box2的宽度增大到500px，可以看到出现了滚动条，
并且这个滚动条仍然会算作box1的内部空间，相当于是padding。也就是说，如果box1使用的盒模型是border-box，那么它的宽度会划分出17个像素给滚动条用的，如下：
这是box1的直接子元素box2超出了box1的范围
现在把box2的宽度该称高跟box2相同的300px，是不会出现滚动条的，但是如果box2里面的元素的宽度大于了box1的宽度，那么box1仍然会出现滚动条，这也就是说，只要box1里面的元素超出了范围，不管是不是直接子元素，都会出现滚动条。
移动下位置试试，如下
可以使用::-webkit-scrollbar { display: none;}来隐藏，滚动条，虽然没了滚动条，但是我们只要将鼠标悬浮到box1中，按住shift键，滚动鼠标，仍然是可以滚动的。
补充一些技巧
el-select下拉里面是如何控制高度固定然后，当下拉选项超出高度时，才会出现滚动条的。
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
