css---overflow自定义样式

最新推荐文章于 2023-11-10 18:14:22 发布

原创最新推荐文章于 2023-11-10 18:14:22 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了如何通过CSS自定义滚动条的样式，以满足网页设计的美观需求。通过设置`.left-content::-webkit-scrollbar`、`.left-content::-webkit-scrollbar-thumb`和`.left-content::-webkit-scrollbar-track`等选择器，可以改变滚动条的宽度、颜色、边框圆角等属性，从而实现更符合页面设计风格的滚动条效果。

一、原始css的overflow

overflow ：用于内容展示时，内容过长，导致空间不足。以下是菜鸟上的介绍以及例子，有兴趣的话可以先看看原始的。

二、需求自定义overflow

因需求方需要做一个非原始css的滚动条，本身可能我们直接这样使用：overflow：auto，就可以完成内容过长的处理，但是原始的样式偏向于普通，不太符合有时候页面美观问题，所以我自定义了自己的overflow。

.left-content{
   padding:  8px;
   width: 300px;
   height: 500px;
   overflow: auto;
}
/*滚动条高宽度*/
.left-content::-webkit-scrollbar{
    width: 8px;
    height: 4px;
}
/*滚动条滑块*/
.left-content::-webkit-scrollbar-thumb{
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #c7c4c4;
}
/*滚动条里面轨道*/
.left-content ::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;

}
/*滚动条的小边角*/
.left-content::-webkit-scrollbar-corner {
    background: transparent;
}