css滑动条制作

自定义CSS滚动条基础方法

修改浏览器默认滚动条样式需使用::-webkit-scrollbar系列伪元素（仅WebKit内核浏览器支持）。以下是完整属性组：

::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条宽度 */
  height: 12px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停状态 */
}

兼容性解决方案

对于非WebKit浏览器（如Firefox），需使用以下属性：

html {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

隐藏滚动条但保留功能

通过负边距和透明化实现视觉隐藏：

.container {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

动态渐变效果

结合CSS动画实现高级效果：

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  animation: scrollbar-pulse 2s infinite;
}

@keyframes scrollbar-pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.5; }
  100% { opacity: 0.8; }
}

响应式设计技巧

通过媒体查询适配不同设备：

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}