固定滚动条的位置

Question

这是我的示例代码：

<div class="menu">
  menu
</div>

<div class="main">
  <table>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </table>
</div>

和css：

td {
  border: 1px solid black;
}

div {
  box-sizing: border-box;
  border: 1px solid red;
}

.menu {
  width: 150px;
  float: left;

height: 300px;
}

.main {
  width: calc(100% - 150px);
  overflow-x: scroll;
}

我想知道是否可以制作具有固定位置的垂直滚动条（始终位于视口底部，因此您无需向下滚动整个内容以从左向右滚动）。

我的小提琴： https://jsfiddle.net/uyreeqpd/1/

Answer 1

我认为您应该将height:100vh;添加到您的表格并添加oveflow-y:scroll;，而不是修复滚动条位置。

这样你就可以看到桌子底部的水平滚动。

这是fiddle。

body,html{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
td {
  border: 1px solid black;
}

div {
  box-sizing: border-box;
  border: 1px solid red;
}

.menu {
  width: 150px;
  float: left;
  height: 300px;
}

.main {
  width: calc(100% - 150px);
  overflow-x: scroll;
  height:100vh;
  overflow-y:scroll;
}

<div class="menu">
  menu
</div>

<div class="main">
  <table>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </table>
</div>