css实现滚动条

43 阅读1分钟
第一种

实现效果

<div class="test test-1">
	<div class="scrollbar"></div>
</div>

  .test {
      width   : 50px;
      height  : 200px;
      overflow: auto;
      float   : left;
      margin  : 5px;
      border  : none;
  }
  .scrollbar {
      width : 30px;
      height: 300px;
      margin: 0 auto;
  }
  .test-1::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background   : #ededed;
  }

第二种

实现效果

<div class="test test-5">
	<div class="scrollbar"></div>
</div>

123
  .test-5::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
  }
  .test-5::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
      );
  }
  .test-5::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #ededed;
      border-radius: 10px;
  }

前两种都是在webkit内核的浏览器中才起作用。在火狐浏览器中改变滚动条样式:
.test-5 {
	scrollbar-width: thin;
	scrollbar-color: rgba(144, 147, 153, .3) rgba(144, 147, 153, .05);
	scrollbar-track-color: rgba(144, 147, 153, .05);
	-ms-scrollbar-track-color: rgba(144, 147, 153, .05);
}

转载于 blog.csdn.net/weixin_4382…