javascript - 粘性标题 - 溢出-x：自动与溢出-y：未设置，有可能吗？

Question

只要表格组件位于视口中，我正在努力使表格的标题行保持在顶部。

我在父 div 内的表包装器 div 中有一个表。我需要通过将其溢出设置为自动来控制使用表格包装器 div 的水平滚动条。对于垂直滚动，我希望表包装器通过将表包装器的溢出设置为继承或取消设置来从父 div 继承滚动条。

骨架代码 - https://codepen.io/shubham_687/pen/powZpNb

HTML 更改

<div class="parentWrapper">
    <div class="tableWrapper">
        <table>
            <thead>
                <tr>
                    <th class="sticky-header">num</th>
                    <th class="sticky-header">alpha</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <th>A</th>
                </tr>
                <tr>
                    <td>2</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>C</td>
                </tr>
            </tbody>
        </table>
    </div>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
    <p> Paragraph </p>
</div>

CSS 更改

.sticky-header {
  z-index: 7;
  position: sticky;
  top: 0px;
}

.parentWrapper {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
  max-height: 300px;
}

/*
This is working right now, in order to make header row sticky, have to unset both scroll bars from table wrapper
*/
.tableWrapper {
  overflow-x: unset;
  overflow-y: unset;
  position: relative;
}

/*
 Need this so that sticky header can work and also table wrapper can control horizontal scroll bar by setting max width later
*/
/*
.tableWrapper {
  overflow-x: auto;
  overflow-y: unset;
  position: relative;
}
 */

似乎overflow-x：自动覆盖overflow-y值并且两个滚动条的控制都转到表包装器div，我们可以访问那些为表包装器设置max-height和max-width的滚动条。

如果我将打扰溢出-x 和溢出-y 设置为未设置，则水平和垂直滚动条都由父 div 控制。

所以我的问题是是否可以使用 overflow-x : auto 和 overflow-y: unset 还是不支持这种组合？

标签： javascriptcssscrollbaroverflow