纯css 实现滚动条的样式 和滚动条轨道

香菊网 发表于: 2019-05-09 分类: css  H5部分  前端front  HTML&CSS  

当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类:-webkit-scrollbar 来实现对滚动条的自定义。

下面是本站的css的滚动条的代码

/*定义滚动条轨道*/
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-box-shadow: transparent;
}


/*定义滚动条*/
::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 10px;
}


/*定义滚动条高宽及背景*/
::-webkit-scrollbar {
    background-color: transparent;
    // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    width: 5px;
    height:2px;
}

如果需要隐藏滚动条,可以直接把宽度改成 0 就好了。

如果文档中会有多个滚动条出现,而且希望所有的滚动条样式是一样的,那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

 

标签: cssH5部分前端frontHTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮