如何固定scrollbar track高度并配置蓝灰配色？

以下是针对不同浏览器的实现方案，核心思路是通过自定义滚动条样式或模拟滚动条来满足需求：

一、Webkit内核浏览器（Chrome、Edge、Safari等） #

直接利用::-webkit-scrollbar系列伪元素自定义样式，通过轨道的padding固定有效高度，结合线性渐变实现蓝色起始段：

/* 滚动容器 */
.custom-scroll-container {
  width: 300px; /* 可按需调整 */
  height: 500px; /* 容器总高度 */
  overflow-y: auto;
  border: 1px solid #eee;
}

/* 设置滚动条宽度 */
.custom-scroll-container::-webkit-scrollbar {
  width: 8px;
}

/* 自定义滚动条轨道 */
.custom-scroll-container::-webkit-scrollbar-track {
  /* 上下padding控制轨道有效高度：容器高度 - 上下padding总和 = 轨道固定高度 */
  padding: 120px 0; 
  /* 线性渐变：前20%为蓝色，剩余为灰色，可调整百分比控制蓝色段长度 */
  background: linear-gradient(to bottom, #42a5f5 20%, #e0e0e0 20%);
  border-radius: 4px;
}

/* 自定义滚动条滑块 */
.custom-scroll-container::-webkit-scrollbar-thumb {
  background-color: #1e88e5;
  border-radius: 4px;
  /* 滑块上下margin需与轨道padding一致，确保在轨道有效区域内滑动 */
  margin: 120px 0;
}

关键调整点： #

• 修改padding值可改变轨道固定高度，比如容器高度500px，上下padding各120px，轨道有效高度为500 - 240 = 260px
• 调整渐变中的百分比（20%）可控制蓝色起始段的长度
• 滑块margin需与轨道padding匹配，避免滑块超出轨道范围

二、Firefox浏览器 #

Firefox对滚动条样式自定义支持有限，可通过模拟滚动条的方式实现：

/* 外层容器，用于定位模拟轨道 */
.scroll-wrapper {
  position: relative;
  width: 320px;
  height: 500px;
  border: 1px solid #eee;
}

/* 内容滚动容器 */
.scroll-content {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  /* 隐藏Firefox默认滚动条 */
  scrollbar-width: none;
}

/* 模拟滚动条轨道 */
.scroll-wrapper::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 120px;
  bottom: 120px;
  width: 8px;
  border-radius: 4px;
  /* 线性渐变实现蓝色起始段 */
  background: linear-gradient(to bottom, #42a5f5 20%, #e0e0e0 20%);
  pointer-events: none; /* 不干扰内容滚动交互 */
}

/* 自定义滚动条滑块（兼容webkit） */
.scroll-content::-webkit-scrollbar-thumb {
  background-color: #1e88e5;
  border-radius: 4px;
  margin: 120px 0;
}

关键调整点： #

• 通过top和bottom值控制轨道固定高度，top:120px; bottom:120px意味着轨道高度为500 - 240 = 260px
• 渐变百分比可按需调整蓝色段长度

三、动态高度场景适配 #

如果容器高度是动态变化的，可通过CSS变量或JavaScript动态计算padding/top/bottom的值，确保轨道高度始终符合预期。

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