自定义滚动条样式

/*定义滚动条样式*/
  ::-webkit-scrollbar {
    width: 10px!important;
    height: 80px!important;
  }
  ::-webkit-scrollbar-button {
   background-color: #ccc;
    display: none;

  }
  ::-webkit-scrollbar-track {
    background: #fff;
  }
  ::-webkit-scrollbar-track-piece {
    background: #fff;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  

.miniScrollbar:hover {
overflow: auto!important;
} .miniScrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .miniScrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } .miniScrollbar::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); }

  

posted @ 2018-10-15 22:40  春风得意之时  阅读(161)  评论(0编辑  收藏  举报