CSS 设置滚动条样式

滚动条中的属性

属性	描述
`::-webkit-scrollbar`	滚动条整体部分，其中的属性有`width`,`height`,`background`,`border`等。
`::-webkit-scrollbar-button`	滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
`::-webkit-scrollbar-track`	外层轨道。可以用`display:none`让其不显示，也可以添加背景图片，颜色改变显示效果。
`::-webkit-scrollbar-track-piece`	内层轨道，需要注意的就是它会覆盖第三个属性的样式
`::-webkit-scrollbar-thumb`	滚动条里面可以拖动的那部分
`::-webkit-scrollbar-corner`	边角，两个滚动条交汇处
`::-webkit-resizer`	两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

注意: 是给滚动的盒子加这些属性，例如：

.form {
    height: 100vh;
    overflow-y: scroll;
  }
.form::-webkit-scrollbar{
   display: none;
  }

滚动条常用效果

定义滚动条轨道

内阴影+圆角

-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
      border-radius:10px;
      background-color:#F5F5F5;
}

定义滑块

内阴影+圆角

::-webkit-scrollbar-track{
      -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
      border-radius:10px;
      background-color:#F5F5F5;
}

设置滚动条宽高以及圆角

::-webkit-scrollbar{
  border-radius: 20px;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb{
  background: #d2d0ce;
  border-radius: 20px;
}

CSS隐藏滚动条

Firefox浏览器
1
scrollbar-width: none; /* Firefox */
IE浏览器
1
-ms-overflow-style: none; /* IE 10+ */

Chrome和Safari浏览器

1
2
3

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

Demo

.sidebar-wrapper::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.sidebar-wrapper {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}