滚动条相关问题

原生标准属性

/* 全局或特定元素 */
.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 */
}

overflow-x 与 overflow-y

当一个轴设置为 hidden、scroll 或 auto，另一个轴仍为默认的 visible 时，后者的计算值会变为 auto。因此只写 overflow-y: auto 时，水平溢出也可能产生滚动容器。

.panel {
  overflow-y: auto;
  overflow-x: hidden; /* 需要明确限制横向溢出时显式声明 */
}

overscroll-behavior

overscroll-behavior 控制滚动到边界时是否将剩余滚动传递给祖先滚动容器。弹窗、抽屉等独立滚动区域通常使用 contain，而不是无差别地阻止页面滚动。

.dialog-body {
  overscroll-behavior: contain;
}