利用css改变浏览器默认的滚动条样式

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:8px;
        height: 2px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);
/*inset后 第一个0表示:阴影水平偏移值(可取正负值);第二个0:阴影垂直偏移值(可取正负值);1px:阴影模糊值(越小表示越清晰);rgba(0,0,0,0.3):阴影颜色;*/
        border-radius:100px;
        opacity: 0;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:100px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset 0 0 0px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background:#D8D8D8;
    }

效果如图

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容