CSS自定义滚动条样式

.menuItems::-webkit-scrollbar {
/*滚动条整体样式*/
width: 11px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}

.menuItems::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #cccdce;
}

.menuItems::-webkit-scrollbar-thumb:hover {
/*滚动条里面小方块*/
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #9696a0;
}

.menuItems::-webkit-scrollbar-track:hover {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0px;
background: #EDEDED;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天心情很是不好呐,上午没来上班,钉钉申请通过,人事居然扣除我双倍工资,记过一次。次奥!***屌毛,长话短说,很是...
    仰望天空的人阅读 14,625评论 6 10
  • #scrollbar{ width:450px; height:300px; ...
    蜗牛呱呱阅读 3,856评论 0 0
  • 日精进:人生路都是靠自己判断、自己选择的、当判断错误时,只要立刻归零再修正就是了,不要过于自责浪费无谓的时间在无用...
    胡玉梅阅读 858评论 0 0
  • 第一条 我要和你认真赚钱,好好过世俗的生活,有一个不大但是温馨的家,有一只很乖但是偶尔躲起来的小猫仔,有一只暖暖的...
    白卿诺依阅读 4,149评论 0 1
  • 姐姐要快乐! 啥都忘记!忘啦忘啦忘啦! 不要去想,转移注意力,没什么大不了啊 没心没肺的笑,因为是青春!
    CY陈七阅读 1,085评论 0 0