当滚动条位于轨道顶部时修改其样式的实现方法

DevOps 小满

2026-8-19

滚动条顶部位置移除圆角的实现可能性

纯CSS单独无法实现
目前CSS没有提供能检测滚动条滑块在轨道中具体位置的选择器或状态伪类。虽然可以通过::-webkit-scrollbar、::-webkit-scrollbar-thumb等伪元素自定义滚动条的静态样式，但没法根据滑块的动态位置（比如是否处于顶部）自动切换样式。
结合JavaScript可以实现
核心思路是监听滚动容器的滚动事件，判断容器是否滚动到顶部（此时滑块处于轨道顶部），通过给容器添加/移除自定义类的方式，触发CSS修改滚动条滑块的圆角样式。

简单实现示例

HTML结构

<div class="scroll-box">
  <!-- 这里放足够长的内容，确保容器能出现滚动条 -->
  <p>示例内容...</p>
  <p>示例内容...</p>
  <p>示例内容...</p>
  <!-- 重复添加内容直到容器可滚动 -->
</div>

CSS样式

.scroll-box {
  width: 300px;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
}

/* 默认状态：滚动条滑块带圆角 */
.scroll-box::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 8px;
}

/* 滚动到顶部时：移除滑块圆角 */
.scroll-box.top-position::-webkit-scrollbar-thumb {
  border-radius: 0;
}

/* 滚动条基础样式 */
.scroll-box::-webkit-scrollbar {
  width: 6px;
}
.scroll-box::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

JavaScript逻辑

const scrollBox = document.querySelector('.scroll-box');

scrollBox.addEventListener('scroll', () => {
  // 当容器滚动距离为0时，判定为滑块处于轨道顶部
  const isAtTop = scrollBox.scrollTop === 0;
  scrollBox.classList.toggle('top-position', isAtTop);
});