通过CSS进行多窗格滚动

Multi-pane scrolling via CSS

本文关键字：滚动 CSS 通过      更新时间：2023-09-26

我想创建一个双窗格视图，其中屏幕的顶部横幅是固定的，而底部可以水平滚动。当用户水平滚动时，他们应该仍然能够看到相同的顶部横幅。我附上了一些示例代码和相应的jsfiddle。

问题是，当用户从GROUP2滚动到GROUP3时，顶部的标题会被裁剪掉。我希望当用户滚动时，标题在屏幕顶部继续显示。

<div>
  <div class="header">
    COMPANY NAME
  </div>
  <div class="scroller">
    <div class="group1">
      GROUP1
    </div>
    <div class="group2">
      GROUP2
    </div>
    <div class="group3">
      GROUP3
    </div>
  </div>
</div>

.header {
  width:100%;
  height:60px;
  background:red;
}
.scroller {
  overflow-y:hidden;
  overflow-x:scroll;
}
.group1 {
  top:80px;
  left:0px;
  width:500px;
  position:absolute;
}
.group2 {
  top:80px;
  left:540px;
  width:500px;
  position:absolute;
}
.group3 {
  top:80px;
  left:1080px;
  width:500px;
  position:absolute;
}

试试这个更新的fiddle

.header {
  width:100%;
  height:60px;
  background:red;
  position: fixed;
  top:0px;
  left:0px;
}
相关文章：