如何在可滚动的aside元素hover时显示上下滚动提示箭头？

嘿，这个需求我刚好折腾过类似的，来给你拆解下～

首先直接给结论：如果要精准实现「只有在能滚动的方向才显示箭头」，纯CSS是做不到的，因为CSS没法获取元素的滚动高度、当前滚动位置这些动态计算的值。但如果只是hover时不管能不能滚动都显示箭头，那纯CSS就能搞定，但显然你要的是更智能的效果，所以得搭配一点JavaScript来判断滚动状态。

下面给你一套完整的实现方案：

第一步：基础HTML结构 #

先把aside和箭头元素搭好，把箭头放在aside内部，方便定位：

<aside class="scroll-container">
  <div class="scroll-arrow scroll-up">↑</div>
  <div class="scroll-arrow scroll-down">↓</div>
  <!-- 这里放你的滚动内容 -->
  <p>大量内容...</p>
  <p>大量内容...</p>
  <!-- 重复足够多的内容让aside可滚动 -->
</aside>

第二步：CSS样式 #

先把aside的滚动条隐藏（用你原来的代码），然后给箭头做定位，默认隐藏，hover时显示（但最终还要靠JS控制是否真的显示）：

.scroll-container {
  position: relative;
  border-right: 1px solid #333333;
  overflow-y: scroll;
  scrollbar-width: none; /* 针对Firefox隐藏滚动条 */
  height: 300px; /* 给个固定高度让它能滚动 */
}
/* 针对Chrome/Edge/Safari隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-arrow {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 4px;
  opacity: 0;
  pointer-events: none; /* 不干扰内容点击 */
  transition: opacity 0.2s;
}
.scroll-up {
  top: 0;
}
.scroll-down {
  bottom: 0;
}
/* hover时显示箭头（但还要结合JS的类来控制） */
.scroll-container:hover .scroll-arrow {
  opacity: 1;
}
/* 当不能滚动时，隐藏对应箭头 */
.scroll-container:not(.can-scroll-up) .scroll-up,
.scroll-container:not(.can-scroll-down) .scroll-down {
  opacity: 0;
}

第三步：JavaScript判断滚动状态 #

写个函数来计算aside是否能向上/向下滚动，然后给它加上对应的类，还要监听滚动和窗口resize事件来更新状态：

const scrollContainer = document.querySelector('.scroll-container');

function updateScrollState() {
  // 判断是否能向上滚动：scrollTop > 0 就说明可以往上滚
  const canScrollUp = scrollContainer.scrollTop > 0;
  // 判断是否能向下滚动：scrollTop + 可视高度 < 总滚动高度
  const canScrollDown = scrollContainer.scrollTop + scrollContainer.clientHeight < scrollContainer.scrollHeight;

  // 更新类名
  scrollContainer.classList.toggle('can-scroll-up', canScrollUp);
  scrollContainer.classList.toggle('can-scroll-down', canScrollDown);
}

// 页面加载时先执行一次
updateScrollState();

// 滚动时更新状态
scrollContainer.addEventListener('scroll', updateScrollState);

// 窗口大小变化时也更新（防止内容高度变化）
window.addEventListener('resize', updateScrollState);

补充说明 #

• 如果你的页面里有多个这样的aside，只需要把JS改成遍历所有.scroll-container元素就行，逻辑是一样的。
• 箭头样式你可以随便改，比如换成图标、调整颜色位置，都在CSS里改就行。
• 要是你接受“不管能不能滚动，hover时都显示箭头”，那直接去掉JS部分，保留hover显示箭头的CSS就行，不过这样体验会差一点，比如不能滚动的时候还显示箭头，用户操作后没反应会困惑。

备注：内容来源于stack exchange，提问作者Thomas