修改滚动条默认样式

有时候为了和我们的页面主题色相搭配,需要我们修改滚动条的默认样式,下面我们来简单的操作一下,其实就是修改样式的问题,
给产生滚动的元素,增加如下样式即可:

 /*设置元素超出部分滚动*/
        .textcon{width: 300px;height: 200px;overflow-x: hidden;overflow-y:scroll;position: absolute;margin: 50px 50px;border: 1px solid aquamarine;}

 /* 设置滚动条的样式 */
        .textcon::-webkit-scrollbar {width: 10px;}
        /* 滚动槽 */
        .textcon::-webkit-scrollbar-track {background: #000000;border-radius: 4px;}
        /* 滚动条滑块 */
        .textcon::-webkit-scrollbar-thumb {background: #ffe5b5;box-shadow: inset 0 0 1px #101826;border-radius: 4px;}

打开页面,效果如下:

修改默认样式成功

完美实现。

你可能感兴趣的:(修改滚动条默认样式)