CSS 如何让滚动条在 div 上方

当使用 overflow-x: scroll 的时候。需要水平滚动条不仅出现在底部，还能出现在顶部，或者同时显示在顶部和底部。

方法一：使用 CSS 翻转容器（纯CSS Hack）

通过 CSS 翻转容器使得滚动条显示在顶部，但内容保持正常方向。注意：此方法可能影响某些交互或布局：

<style>
  .container-wrapper {
    overflow-x: scroll;  /* 底部滚动条（默认位置） */
    transform: scaleY(-1); /* 翻转容器，使滚动条到顶部 */
  }
  
  .content {
    transform: scaleY(-1); /* 再次翻转内容，恢复正常方向 */
    white-space: nowrap; /* 确保内容水平排列 */
  }
</style>

<div class="container-wrapper">
  <div class="content">
    <!-- 你的超宽内容在这里 -->
    <div style="width: 2000px;">这是一个很宽的内容...</div>
  </div>
</div>

原理：

外层容器通过 scaleY(-1) 垂直翻转，使默认在底部的滚动条显示到顶部。
内部内容再次翻转，抵消外层容器的翻转效果，保持内容正常显示。

方法二：双滚动条 + JavaScript 同步

创建两个滚动条（顶部和底部），通过 JavaScript 同步它们的滚动位置。

<style>
  .scroll-top, .scroll-bottom {
    overflow-x: scroll;
    width: 100%;
    height: 20px; /* 滚动条高度 */
  }

  .content-wrapper {
    width: 2000px; /* 超宽内容宽度 */
  }
</style>

<!-- 顶部滚动条 -->
<div class="scroll-top" id="topScroll">
  <div class="content-wrapper"></div>
</div>

<!-- 实际内容容器 -->
<div class="scroll-bottom" id="bottomScroll">
  <div class="content-wrapper">
    这是一个很宽的内容...
  </div>
</div>

<script>
  // 同步滚动事件
  const topScroll = document.getElementById('topScroll');
  const bottomScroll = document.getElementById('bottomScroll');

  topScroll.onscroll = () => {
    bottomScroll.scrollLeft = topScroll.scrollLeft;
  };

  bottomScroll.onscroll = () => {
    topScroll.scrollLeft = bottomScroll.scrollLeft;
  };
</script>

原理：

创建两个独立的滚动容器（一个在顶部，一个在底部）。
使用 JavaScript 监听滚动事件，并同步两者的 scrollLeft 值。

方法三：使用自定义滚动条库（推荐）

使用第三方库（如 simplebar 或 perfect-scrollbar）完全自定义滚动条样式和位置，安装库（以 simplebar 为例，支持 React、Vue、Angular）：

npm install simplebar

实现代码：

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">
<div data-simplebar style="max-width: 100%; height: 200px;">
  <div style="width: 2000px;">这是一个很宽的内容...</div>
</div>

<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<style>
  /* 自定义滚动条到顶部 */
  .simplebar-track.simplebar-horizontal {
    top: 0;
    bottom: auto;
  }
</style>

优点：

完全控制滚动条位置和样式。
兼容现代浏览器，无需 Hack。

CSS 如何让滚动条在 div 上方

方法一：使用 CSS 翻转容器（纯CSS Hack）

方法二：双滚动条 + JavaScript 同步

方法三：使用自定义滚动条库（推荐）

CSS 滚动条在上方扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论