自定义滚动条样式

喵恋

已于 2022-07-18 11:54:46 修改

阅读量127

点赞数

文章标签： css

于 2022-07-18 11:50:24 首次发布

本文链接：https://blog.csdn.net/weixin_49675710/article/details/125845743

版权

这篇博客主要介绍了如何使用CSS来定制网页中的滚动条样式，包括隐藏滚动条、设置滚动条宽度、滚动槽和滑块的背景颜色以及阴影效果。通过对`::-webkit-scrollbar`、`::-webkit-scrollbar-track`和`::-webkit-scrollbar-thumb`的选择器应用样式，可以实现滚动条的视觉增强和交互优化。

摘要由CSDN通过智能技术生成

        /* 设置滚动条的样式 */
        .pic_box::-webkit-scrollbar {
            width: 12px;
            display: none;
        }

        /* 滚动槽 */
        .pic_box::-webkit-scrollbar-track {
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
            border-radius: 10px;
            display: none;
        }

        /* 滚动条滑块 */
        .pic_box::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
            display: none;
        }

        .pic_box::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(255, 0, 0, 0.4);
            display: none;
        }