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。