css设置滚动条样式

Px_10262626

已于 2022-05-19 16:18:36 修改

阅读量139

点赞数 1

文章标签： css html5

于 2021-07-23 11:15:20 首次发布

原文链接：https://blog.csdn.net/p445098355/article/details/111981378

版权

MDN ::-webkit-scrollbar CSS 伪类元素

HTML代码：

<div class="element">
    内容
</div>

CSS代码：

.element{
     overflow-y: scroll;
    overflow-x: hidden;
}

/* 修改滚动条样式 */
.element::-webkit-scrollbar {
    width: 3px;  /*纵向滚动条宽度*/
    height：3px; /*横向滚动条宽度*/
}

/* 滚动条区域样式 */
.element::-webkit-scrollbar-thumb {
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

/* 滚动条背景样式 */
.element::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

————————————————
本文转自CSDN博主「柯晓楠」的原创文章
原文链接：https://blog.csdn.net/p445098355/article/details/111981378