如何使用HTML和CSS为滚动条添加自定义图片？

一、WebKit内核浏览器原生实现（Chrome/Safari/Edge） #

WebKit内核浏览器支持通过CSS伪元素直接自定义滚动条，可给滚动条各部分设置背景图片：

/* 整个滚动条容器 */
::-webkit-scrollbar {
  width: 20px; /* 宽度需匹配你的图片尺寸 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background-image: url('你的轨道图片路径');
  background-repeat: repeat-y; /* 垂直重复平铺 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-image: url('你的滑块图片路径');
  background-size: contain; /* 适配滑块尺寸 */
  background-repeat: no-repeat;
}

/* 滑块 hover 状态 */
::-webkit-scrollbar-thumb:hover {
  background-image: url('你的hover状态滑块图片路径');
}

注意：

• 确保图片路径正确，本地路径用相对路径即可
• 滚动条宽度要和图片宽度匹配，避免拉伸变形
• 若需水平滚动条，将width改为height，repeat-y改为repeat-x

二、Firefox浏览器适配 #

Firefox原生对滚动条图片自定义支持有限，仅能通过scrollbar-color设置颜色，无法直接用图片，可通过两种方式解决：

• 方式1：自定义容器模拟滚动条（推荐）：将内容放入固定高度容器，隐藏原生滚动条，用自定义滑块元素结合JS监听滚动事件控制滑块位置，同时给滑块和容器背景设置图片。
• 方式2：隐藏原生样式后用背景图片模拟，效果不如WebKit理想：

/* Firefox 隐藏原生滚动条样式 */
scrollbar {
  -moz-appearance: none;
  width: 20px;
}

scrollbar-track {
  background-image: url('轨道图片路径');
  background-repeat: repeat-y;
}

scrollbar-thumb {
  background-image: url('滑块图片路径');
  background-size: contain;
}

三、跨浏览器通用模拟方案（推荐） #

要兼容所有主流浏览器，推荐用JS+CSS模拟滚动条，核心思路：

• 外层容器设overflow: hidden，内部内容容器设overflow-y: scroll，将原生滚动条偏移出可视区域（如给内容容器加margin-right: -20px，对应滚动条宽度）
• 自定义滑块元素，监听内容容器scroll事件，计算滑块位置比例，同步更新滑块top值
• 给滑块和模拟轨道设置背景图片

示例代码结构：

<div class="scroll-container">
  <div class="content">
    <!-- 你的内容 -->
  </div>
  <div class="custom-scrollbar">
    <div class="custom-thumb"></div>
  </div>
</div>

.scroll-container {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

.content {
  height: 100%;
  overflow-y: scroll;
  padding-right: 20px; /* 预留滑块空间 */
  box-sizing: content-box;
}

.custom-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background-image: url('轨道图片路径');
  background-repeat: repeat-y;
}

.custom-thumb {
  width: 100%;
  height: 50px; /* 滑块初始高度，可根据内容长度动态计算 */
  background-image: url('滑块图片路径');
  background-size: contain;
  cursor: pointer;
}

配套JS逻辑：

const content = document.querySelector('.content');
const thumb = document.querySelector('.custom-thumb');
const scrollbar = document.querySelector('.custom-scrollbar');

// 计算滑块高度比例
const updateThumbHeight = () => {
  const contentHeight = content.scrollHeight;
  const containerHeight = content.clientHeight;
  const thumbHeight = (containerHeight / contentHeight) * containerHeight;
  thumb.style.height = `${Math.max(30, thumbHeight)}px`; // 限制最小高度
};

// 更新滑块位置
const updateThumbPosition = () => {
  const scrollTop = content.scrollTop;
  const scrollRatio = scrollTop / (content.scrollHeight - content.clientHeight);
  const topPosition = scrollRatio * (scrollbar.clientHeight - thumb.offsetHeight);
  thumb.style.top = `${topPosition}px`;
};

// 监听滚动
content.addEventListener('scroll', updateThumbPosition);
// 初始化
updateThumbHeight();
updateThumbPosition();

// 滑块拖动功能
let isDragging = false;
let startY = 0;
let startScrollTop = 0;

thumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  startY = e.clientY;
  startScrollTop = content.scrollTop;
  document.body.style.userSelect = 'none';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const deltaY = e.clientY - startY;
  const scrollRatio = deltaY / (scrollbar.clientHeight - thumb.offsetHeight);
  content.scrollTop = startScrollTop + scrollRatio * (content.scrollHeight - content.clientHeight);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  document.body.style.userSelect = '';
});

常见问题排查 #

• 图片路径错误：检查图片是否存在，相对路径是否与CSS文件位置匹配
• 滚动条宽度不匹配：确保::-webkit-scrollbar的width和图片宽度一致，避免拉伸
• Firefox无效果：改用模拟方案，原生不支持直接用图片设置滚动条
• 滑块无法点击/拖动：检查CSS的cursor属性，以及JS事件是否正确绑定

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