javascript - 如何拆分 overflow-x 和 overflow-y

Question

我在固定大小的 div 中有一个表。如果表格溢出 div，我希望滚动条出现。我还想在向下滚动时克隆​​表格的标题，以便标题持久存在。我遇到的问题是我希望水平滚动条滚动克隆的标题和原始表格，而垂直滚动条仅移动原始表格。

我可以使用 javascript 克隆 header ，但我无法以某种方式设置结果样式以实现我想要的结果。下面是对 HTML/CSS 的一种尝试，假设克隆的 header 已经到位。我得到了很多额外的滚动条，据我所知这是由于 CSS 规范本身。我希望有解决方法。

HTML

<div id="container">
    <table id="headerClone">
        <tbody>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
            </tr>
        </tbody>
    </table>
    <div id="tableWrapper">
        <table>
            <tbody>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

#container {
    width: 10em;
    height: 10em;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}
#headerClone {
    flex: 0 0 auto;
}
#tableWrapper {
    flex: 1 1 auto;
    overflow-y: auto;
}

链接到 jsfiddle

Answer 1

为此您可能需要 JavaScript。

片段:

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
var wrap= document.getElementById('tableWrapper');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};

#container {
  width: 10em;
  height: 10em;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#headerClone {
  flex: 0 0 auto;
  position: absolute;
  overflow: hidden;
  background: yellow;
}

#tableWrapper {
    flex: 1 1 auto;
}

<div id="container">
    <div id="headerClone">
      <table>
        <tbody>
          <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
          </tr>
      </tbody>
    </table>
    </div>
    <div id="tableWrapper">
        <table>
            <tbody>
                <tr>
                    <th>Heading 1</th>
                    <th>Heading 2</th>
                    <th>Heading 3</th>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我将 headerClone 移动到父 div 元素中:

<div id="headerClone">
  <table>
    <tr><th>Heading 1<th>Heading 2<th>Heading 3</th>
  </table>
</div>

我将这些样式添加到 headerClone:

#headerClone {
  position: absolute;
  overflow: hidden;
  background: yellow;
}

使用 JavaScript，我将 headerClone 的宽度设置为匹配 container 的宽度，并在 container 上添加了一个滚动事件，这左右移动 headerClone，但不上下移动:

var cont= document.getElementById('container');
var head= document.getElementById('headerClone');
head.style.width= cont.clientWidth+'px';
cont.onscroll = function() {
  head.scrollLeft= this.scrollLeft;
};