有时接到UI设计需要鼠标移入使滚动条加粗,但无论怎样设置,彷佛不起作用,原因是滚动条是由边框和背景组成,所以通过设置border-color: transparent 可以实现,别忘了加上background-clip: padding-box 它可以使背景最大到达padding外边缘,同时加粗:hover之后的边框宽度,间接实现了鼠标移入使滚动条加粗,核心代码如下:
.divScroll {
width: 100%;
height: calc(100vh - 100px);
overflow-x: auto;
/* 自定义整个滚动条 */
&::-webkit-scrollbar {
height: 6px;
}
/* 自定义滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* 自定义滚动条的滑块(thumb) */
&::-webkit-scrollbar-thumb {
border-radius: 4px;
border-style: solid;
border-color: transparent;
border-width: 1px;
background: #C9CDD4;
background-clip: padding-box; //这一句是必要的
}
/* 当滑块悬停或活动时自定义滚动条的滑块 */
&::-webkit-scrollbar-thumb:hover {
border-radius: 4px;
border-style: solid;
border-color: #C9CDD4;
border-width: 6px;
background: #C9CDD4;
}
}