表格顶部和底部的水平滚动条

新手上路,请多包涵

我的页面上有一个非常大的 table 。所以我决定在表格底部放一个水平滚动条。但我希望这个滚动条也位于桌面的顶部。

我在模板中的内容是这样的:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>

仅在 HTML 和 CSS 中可以做到这一点吗?

原文由 psoares 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
2 个回答

要在元素顶部模拟第二个水平滚动条,请在具有水平滚动的元素上方放置一个“虚拟” div ,其高度足以容纳滚动条。然后为虚拟元素和真实元素附加“滚动”事件的处理程序,以便在移动任一滚动条时使另一个元素同步。虚拟元素看起来像真实元素上方的第二个水平滚动条。

一个活生生的例子,看 这个小提琴

这是代码

HTML:

 <div class="wrapper1">
 <div class="div1"></div>
 </div>
 <div class="wrapper2">
 <div class="div2">
 <!-- Content Here -->
 </div>
 </div>

CSS:

 .wrapper1, .wrapper2 {
 width: 300px;
 overflow-x: scroll;
 overflow-y:hidden;
 }

 .wrapper1 {height: 20px; }
 .wrapper2 {height: 200px; }

 .div1 {
 width:1000px;
 height: 20px;
 }

 .div2 {
 width:1000px;
 height: 200px;
 background-color: #88FF88;
 overflow: auto;
 }

JS:

 $(function(){
 $(".wrapper1").scroll(function(){
 $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
 });
 $(".wrapper2").scroll(function(){
 $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
 });
 });

原文由 StanleyH 发布,翻译遵循 CC BY-SA 3.0 许可协议

仅使用 CSS 的解决方案

有一种方法可以实现这一点,我在这里没有看到任何人提到。

通过将父容器旋转 180 度 并将子容器 再次旋转 180 度,滚动条将显示在顶部

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
}
.child {
  transform: rotateX(180deg);
}

有关参考,请参阅 w3c 存储库 中的问题。

原文由 Dario Digregorio 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题