更改滚动条样式

Posted 2021-01-13 ouchen0312

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: #113b9f;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #113b9f;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #3d83ff;
}

/* 定义滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:end:increment {
  background: #143b9a url(‘images/scroll_cntrl_up.png‘) no-repeat center;
  background-size: 10px 10px;
  border-top: 0;
  width: 100%;
}

/* 定义滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:start:decrement {
  background: #143b9a url(‘images/scroll_cntrl_dwn.png‘) no-repeat center;
  background-size: 10px 10px;
  width: 100%;
}