分析
为了看懂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下拉里面是如何控制高度固定然后,当下拉选项超出高度时,才会出现滚动条的。