如何实现仅显示滚动条箭头而非完整滚动条

哈哈，这个问题一点都不浅显！很多做精致UI的朋友都会有这种需求，刚好可以通过纯CSS来搞定，不用额外折腾JS插件，下面我一步步给你拆解：

1. 先搭基础HTML结构 #

先准备一个带滚动内容的容器，示例代码如下：

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 这里放你的长内容，重复足够多让容器触发滚动 -->
    示例文本内容<br>
    示例文本内容<br>
    示例文本内容<br>
    <!-- 更多内容... -->
  </div>
</div>

2. 核心CSS实现方案 #

不同浏览器的滚动条自定义规则不一样，我分开给你讲主流场景的写法：

针对WebKit内核浏览器（Chrome、Safari、新版Edge） #

这部分是最容易精准控制的，利用WebKit专属的滚动条伪元素：

.scroll-container {
  width: 300px; /* 自定义容器宽度 */
  height: 400px; /* 自定义容器高度 */
  overflow-y: auto; /* 开启垂直滚动 */
}

/* 设置滚动条宽度，刚好能容纳箭头按钮即可 */
.scroll-container::-webkit-scrollbar {
  width: 20px;
}

/* 隐藏滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

/* 隐藏滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
  display: none;
}

/* 给箭头按钮加基础样式，还能加hover效果优化交互 */
.scroll-container::-webkit-scrollbar-button {
  background-color: #eee;
  border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-button:hover {
  background-color: #ccc;
}

针对IE和旧版Edge #

如果需要兼容这类浏览器，可以用以下样式：

.scroll-container {
  -ms-overflow-style: none; /* 先隐藏默认滚动条 */
}

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

/* 隐藏轨道和滑块 */
.scroll-container::-ms-scrollbar-track,
.scroll-container::-ms-scrollbar-thumb {
  visibility: hidden;
}

/* 给箭头按钮设置样式 */
.scroll-container::-ms-scrollbar-button {
  background-color: #eee;
}

针对Firefox浏览器 #

Firefox的滚动条自定义权限相对受限，只能通过近似方式实现：

.scroll-container {
  scrollbar-width: thin; /* 把滚动条设为细款 */
  scrollbar-color: transparent transparent; /* 滑块和轨道设为透明 */
}

注：Firefox目前没有单独控制箭头的伪元素，这个方法能让滚动条主体几乎不可见，箭头会保留（样式取决于系统主题），如果要更精准的效果，可能需要用JS模拟自定义箭头按钮。

3. 效果说明 #

设置完成后，容器就只会显示上下滚动的箭头按钮，中间的滚动条轨道和滑块都会被隐藏，完全符合你想要的效果～

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