如何自定义滚动条顶部起始位置及滚动滑块高度？

调整滚动条顶部起始位置 #

直接给::-webkit-scrollbar加top属性没用，因为它是依附滚动容器的内置元素。换个思路，给滚动条轨道设置顶部内边距，同时隐藏默认的上下滚动按钮，就能让滚动条整体下移：

::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度按需调整 */
}

::-webkit-scrollbar-track {
  background: #0D2350;
  padding-top: 30px; /* 数值对应顶部偏移距离 */
  padding-bottom: 30px; /* 底部需留空间可添加 */
}

/* 隐藏默认上下按钮，避免占位干扰偏移效果 */
::-webkit-scrollbar-button {
  display: none;
}

固定滚动滑块的高度 #

默认滑块高度随内容长度自动变化，要固定高度的话，给::-webkit-scrollbar-thumb同时设置min-height和max-height，数值保持一致即可：

::-webkit-scrollbar-thumb {
  background: #ffffff;
  min-height: 60px; /* 固定滑块高度为60px */
  max-height: 60px;
  border-radius: 6px; /* 可选，添加圆角优化样式 */
}

::-webkit-scrollbar-thumb:hover {
  background: #363636;
}

完整可用代码 #

将两部分整合后的最终CSS：

/* 滚动条基础设置 */
::-webkit-scrollbar {
  width: 12px;
}

/* 轨道设置：控制滚动条上下偏移 */
::-webkit-scrollbar-track {
  background: #0D2350;
  padding-top: 30px; /* 顶部下移30px */
  padding-bottom: 30px;
}

/* 隐藏默认按钮 */
::-webkit-scrollbar-button {
  display: none;
}

/* 固定高度的滑块 */
::-webkit-scrollbar-thumb {
  background: #ffffff;
  min-height: 60px;
  max-height: 60px;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #363636;
}

注意点 #

• 这套样式仅支持Chrome、Edge、Safari等WebKit内核浏览器，Firefox和老版本IE需要单独适配。
• 若滚动容器本身有边框或内边距，需微调轨道的padding值适配效果。

内容的提问来源于stack exchange，提问作者Neuro