background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
background-clip: border-box; // 背景延伸至边框外沿（但是在边框下层）
background-clip: padding-box; // 背景延伸至内边距（padding）外沿。不会绘制到边框处
background-clip: content-box; // 背景被裁剪至内容区（content box）外沿
background-clip: text; // 背景被裁剪成文字的前景色
以下例子演示不同属性值对应的背景色情况：
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
原理
1、滚动条构成
::-webkit-scrollbar— 整个滚动条.::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.::-webkit-scrollbar-track— 滚动条轨道.::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
为了便于查看，1、轨道、滑块、hover都用了显眼的颜色；2、轨道加了margin
/* 整体部分 */
::-webkit-scrollbar {
background-color: green;
width: 4px;
height: 4px;
}
/* 滑动轨道 */
::-webkit-scrollbar-track {
border-radius: 10px;
background: blue;
margin: 2px;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: red;
}
/* 滑块效果 */
::-webkit-scrollbar-thumb:hover {
background: orange;
}
未hover：
hover时：
2、实现hover时，宽度增加
以纵向滚动条为例。
鼠标不悬浮时，设置背景色和background-clip: padding-box，边框颜色为透明；悬停时改变背景，就完成了鼠标悬停改变滚动条样式（高度、宽度、颜色）
/* 整体部分 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px dashed transparent;
background-color: red;
background-clip: padding-box;
}
/* 滑块效果 */
::-webkit-scrollbar-thumb:hover {
background: orange; /* 必须写background，覆盖所有的背景 */
}
效果：
业务中实现
修改脚手架控制滚动条样式的文件，路径：quantex-scaffold/app/styles/theme/Scollbar/index.scss，修改后如下：
body::-webkit-scrollbar {
display: none;
}
/* 整体部分 */
::-webkit-scrollbar {
background-color: transparent;
width: 10px;
height: 10px;
}
/* 滑动轨道 */
::-webkit-scrollbar-track {
border-radius: 10px;
background: var(--menu-submenu-bg);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px dashed transparent;
padding-top: 4px;
background-color: var(--text-color-3);
background-clip: padding-box;
}
/* 滑块效果 */
::-webkit-scrollbar-thumb:hover {
background: var(--text-color-2);
}
::-webkit-scrollbar-corner {
display: none;
}
