元素圆角与内部滚动条的矛盾

概述

我们在写 web 页面的时候，除了页面原生的滚动条，比如 HTML 的滚动条，BODY 的滚动条之外，还有一种比较常见的滚动条，那就是元素内部滚动条，我们在利用元素内部滚动条的时候会遇到什么问题呢，我们如何自定义滚动条。

元素圆角与滚动条

比如迅雷客户端，除了最右边的滚动条是页面滚动条，其他两个都是元素内部滚动条。

在面板区域，我们的内部滚动条，因为外部元素的圆角给裁剪掉了，这在视觉上是不行的，那我们想办法解决。

方案一

给这个元素添加一个 margin 让元素与底部有一定距离，这个距离我们认为是圆角的大小，即能解决问题，但是这也会造成元素底部一直有空隙，而不是一个完整的可滚动区域，视觉体验上还是欠佳。

方案二

想到原生滚动条上下有两个箭头，那我们是不是可以把这个箭头改造一下，让它的高度等于圆角的大小，同时透明不可见呢，这样我们就实现了滚动条距离底部有一定距离，不会被外部圆角所裁剪，也能保证完整的滚动区域，保证用户体验。

这是 Chrome 默认的滚动条样式，当然我们还应该知道，滚动条应该四个箭头，上面两个，下面两个，都是用来自增或自减的。

方案实现

自定义滚动条，我们平时用的多的可能是自定义滚动条的轨道，颜色，大小等，但上下箭头一般是隐藏的，所以我们需要去查一下浏览器对于滚动条有哪些CSS选择器

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

除了常用的 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track 之外，我们还找到了我们想要的选择器 ::-webkit-scrollbar-button

我们只需要将滚动条四个箭头隐藏三个就行，先认识一下这些选择器

// 滚动条所有箭头按钮
::-webkit-scrollbar-button

// 垂直方向的滚动条箭头
::-webkit-scrollbar-button:vertical 

// 垂直滚动条上方箭头
::-webkit-scrollbar-button:vertical:start

// 垂直滚动条上方渐箭头
::-webkit-scrollbar-button:vertical:start:increment

// 垂直滚动条上方渐减箭头
::-webkit-scrollbar-button:vertical