我们做网站开发的时候，当内容超出了浏览器的高度或者宽度就会出现滚动条；或者某个元素固定大小，并且设置了overflow:scroll/auto，内容如果超出就出现滚动条，使其不影响页面其他的布局。很多时候我就默认使用浏览器滚动条的默认样式了，直到有一天要做一个在页面中同步显示移动端效果的功能。默认的样式真的是丑啊！
overflow常用属性
既然上面提到了overflow属性，那么就简单的介绍一下吧。
设置文本超出的显示规则
- visible：默认值，当内容超出就让它在超出的地方显示，不做任何处理。
<p style="width: 200px; height: 50px; background: #ccc">
汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。
</p>
visible.png
- hidden：超出的部分直接截断，真的很直接。
<p style="width: 200px; height: 50px; background: #ccc; overflow: hidden;">
汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。
</p>
hidden.png
- auto：如果内容不超出不做处理，超出之后出现滚动条（代码就不贴了，换个值的事）
auto不超出.png
auto超出.png
- scroll：和
auto不同的是会同时出现横向和纵向的滚动条轨道，而且无论内容是否超出都会出现。内容超出的话滚动条也会出现
image.png
-inherit：继承父级的overflow属性值，基本很少使用。
设置文本超出显示特定样式
除了单纯的设置这些属性外，overflow还具有块级格式化上下文的功能，具体的可以查看关于BFC的那一篇文章。还可以配合其他属性，设置文本超出的样式，比如我们经常使用的超出的文本显示省略号等等。
p{
width: 250px;
height: 150px;
background: #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis/clip;
}
<p>
杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。
</p>
注意这里需要配合使用overflow、white-space、text-overflow这三个属性才可以显示省略号，因为设置了不换行，所以单行超出就显示省略号。
ellipsis单行省略号.png
如果是clip则是直接超出就截断。
clip.png
如果要设置多行超出显示省略号呢，要设置多行省略号其实和单行省略感觉并没有什么关系。这里需要用到几个非规范属性（-webkit前缀的）
p{
width: 250px;
height: 100px;
background: #ccc;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}
这里text-overflow不用写了，我是试了一下写不写都一样的效果。但是最后的三个属性都是不可以少的：
-
display: -webkit-box;将对象作为弹性伸缩盒子模型显示 -
-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式 -
-webkit-line-clamp指定显示的文本行数，也就是省略号出现在第几号的设置
多行显示省略号.png
发现省略号是显示出来了，但是为什么下面还接着显示呢？因为这里我们设置了固定高度，把固定高度取消。
不设置高度.png
滚动条样式
开始介绍本文真正要说的内容，就是如何自定义滚动条的样式。首先滚动条是由很多部分组成的，滑动轨道、滑块、上下箭头按钮等等。我们来依次看看他们对应的伪元素。
-
::-webkit-scrollbar：滚动条的整体部分
-
::-webkit-scrollbar-thumb：滑块
-
::-webkit-scrollbar-track：轨道
-
::-webkit-scrollbar-button：两端的按钮
-
::-webkit-scrollbar-corner：边角，横向和纵向滚动条相交的角落处
-
::-webkit-scrollbar-track-piece： 滚动条没有滑块的轨道部分
-
::-webkit-resizer：某些元素的corner部分的部分样式(例:textarea的可拖动按钮)
对于这些伪元素都可以使用边框、背景、阴影等样式修饰。
p{
width: 250px;
background: #ccc;
overflow: scroll;
height: 100px;
}
p::-webkit-scrollbar{
width: 10px;
height: 20px;
background: yellow;
}
scrollbar.png
-webkit-scrollbar这里设置滚动条的整体样式，黄色背景。高度设置的是横向滚动条的高度，宽度设置的是纵向滚动条的宽度。接着看，
p::-webkit-scrollbar-thumb{
background: blue;
}
scrollbar-thumb.png
这里我们把滚动滑块设置成了蓝色，这里设置滑块的宽高是没有效果的。继续，
p::-webkit-scrollbar-track{
background: green;
border-radius: 10px;
}
scrollbar-track.png
这里我们设置了轨道的样式，可以看出轨道的样式是覆盖在滚动条整体样式之上的。轨道也不可以设置宽高，就是滚动条的宽高。继续，
p::-webkit-scrollbar-corner{
background: red;
}
scrollbar-corner.png
我们设置了交叉点的空白角落的样式，这里没有什么需要多说的，继续往下，
p::-webkit-scrollbar-track-piece{
background: #555;
border-radius: 10px;
}
scrollbar-track-piece.png
这里设置的是没有滑块的轨道部分的样式，我们把之前轨道样式的圆角去掉，可以发现这个样式又是覆盖在轨道样式之上的。
p::-webkit-scrollbar-button{
background: #333;
}
scrollbar-button.png
图中指向的位置其实箭头按钮的位置，这里只是表明可以自定义，忽略丑的问题。
最后这个-webkit-resizer属性我没有设置成功，所以不做讲解，如果成功应该就是下图指向的这个位置吧。
-webkit-resizer.png
以上是我们可以通过自定义伪元素来设置滚动条样式，其实还可以通过给这些伪元素添加一些伪类来进行设置。
-
:horizontal：设置水平方向的滚动条
-
:vertical：垂直方向的滚动条
-
:start：设置开始按钮
-
:end：设置结束按钮
-
...等等
这里只列举出一下，具体就不去一个一个测试了。只做一个简单的示例，有兴趣的同学可以去研究一些。
p::-webkit-scrollbar-button:start{
background: black;
}
start.png
这样我们就只设置了第一个按钮的样式。
网友评论