html - 水平滚动时保持垂直滚动条可见

Question

我正在创建一个包含静态标题和最小宽度列的表格。这需要 2 个滚动条:垂直和水平。

现在，垂直滚动条应该只滚动表格行，因为标题是静态的。

然而，当水平滚动时，行和标题都应该滚动。我已经通过拥有一个容器来实现这一点，该容器包含带有 overflow-x: auto 的标题和主体。 body div 有 overflow-y: auto。

问题在于，由于正文是水平滚动 div 的子元素，垂直滚动条不在 View 中，除非您一直向右滚动。

我想让两个滚动条始终可见，但仍然只滚动它们的预期内容。

我创建了一个代码笔来演示这个问题:

https://codepen.io/ntroncoso/pen/rmbrYQ

重要的部分是tableContainer和body:

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 800px;
}

这两个都会产生所需的滚动条，但当正文内容太宽时垂直隐藏。如果在 Javascript 中有可行的解决方案，我愿意接受。

Answer 1

您实际上应该将“min-width”更改为最大宽度并摆脱“overflow-x:auto;”

https://codepen.io/morganfens/pen/vmMazK

<div id="html">
 <div id="container">
    <div id="tableContainer">
      <div id="body">
      <div id="header">
        <div class="head">Header 1</div>
        <div class="head">Header 2</div>
        <div class="head">Header 3</div>
        <div class="head">Header 4</div>
      </div>
        <table id="table">
    <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td</tr>
    <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
    <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
    <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td></tr>
    <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td></tr>
    <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td></tr>
    <tr><td>R7C1</td><td>R7C2</td><td>R7C3</td><td>R7C4</td></tr>
    <tr><td>R8C1</td><td>R8C2</td><td>R8C3</td><td>R8C4</td></tr>
    <tr><td>R9C1</td><td>R9C2</td><td>R9C3</td><td>R9C4</td></tr>
    <tr><td>R10C1</td><td>R10C2</td><td>R10C3</td><td>R10C4</td></tr>
    <tr><td>R11C1</td><td>R11C2</td><td>R11C3</td><td>R11C4</td></tr>
    <tr><td>R12C1</td><td>R12C2</td><td>R12C3</td><td>R12C4</td></tr>
    <tr><td>R13C1</td><td>R13C2</td><td>R13C3</td><td>R13C4</td></tr>
    <tr><td>R14C1</td><td>R14C2</td><td>R14C3</td><td>R14C4</td></tr>
    <tr><td>R15C1</td><td>R15C2</td><td>R15C3</td><td>R15C4</td></tr>
    <tr><td>R16C1</td><td>R16C2</td><td>R16C3</td><td>R16C4</td></tr>
    <tr><td>R17C1</td><td>R17C2</td><td>R17C3</td><td>R17C4</td></tr>
    <tr><td>R18C1</td><td>R18C2</td><td>R18C3</td><td>R18C4</td></tr>
    <tr><td>R19C1</td><td>R19C2</td><td>R19C3</td><td>R19C4</td></tr>
    <tr><td>R20C1</td><td>R20C2</td><td>R20C3</td><td>R20C4</td></tr>
    <tr><td>R21C1</td><td>R21C2</td><td>R21C3</td><td>R21C4</td></tr>
    <tr><td>R22C1</td><td>R22C2</td><td>R22C3</td><td>R22C4</td></tr>  
    </table>
  </div>
    </div>
    <div id="footer">
      The footer
    </div>
  </div>
</div>

CSS

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-width: 800px;
}

#header{
  display: flex;
  flex: row;
  box-sizing: border-box;
  padding: 5px;
  min-width: 800px;
  margin-bottom:15px;
 }