滚动条相关问题

原生标准属性

/* 全局或特定元素 */
.my-scrollable {
  /* 设置滚动条的最大宽度 */
  scrollbar-width: thin; /* auto | thin | none */
  /* 设置滚动条轨道（track）和滑块（thumb）的颜色 */
  scrollbar-color: <thumb-color> <track-color>;
}

::-webkit-scrollbar 伪元素

提示

Chrome / Edge / Safari 支持 ::-webkit-scrollbar，Firefox 不支持。

/* 滚动条整体（垂直滚动条宽度）*/
.my-scrollable::-webkit-scrollbar {
  width: 12px;
  height: 12px; /* 横向滚动条高度 */
}

/* 滚动条轨道 */
.my-scrollable::-webkit-scrollbar-thumb {
  background: #f1f1f1;
  border-radius: 8px;
}

/* 滚动条滑块（thumb）*/
.my-scrollable::-webkit-scrollbar-track {
  background: #888;
  border-radius: 8px;
  border: 3px solid #f1f1f1; /* 留白使 thumb 看起来更窄 */
}

/* hover 状态 */
.my-scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

隐藏滚动条，同时保留滚动功能

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

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