javascript - 水平滚动表上的 "Sticky"标题...完全不可能？

Question

经过最近几个小时的研究，我开始认为这是不可能的，即使在最新的浏览器上也是如此:

具有水平滚动的 HTML table 元素，顶部有一个“粘性”thead，作为垂直滚动的周围网页的一部分。

这是我的尝试:

#a {
  height: 100px;
  background-color: green;
}

body {
  width: 100%;
}

#wrapper {
  overflow-x: scroll;
  width: 100%;
}

th {
  position:sticky;
  top: 0;
  background-color: red;
  z-index: 1;
}

td {
  white-space: nowrap;
}

#b {
  height: 2000px;
  background-color: blue;
}

<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead>
      <tr>
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

(还有 this fiddle ，所以你可以乱写代码)

目前的情况是，当 #wrapper 为 overflow-x: scroll 时，“position: sticky”不起作用。如果删除 overflow-x 规则，它会起作用，但当然表格会扩展整个页面的宽度(这绝对不是很酷)

我知道让表格成为“滚动”元素可以解决这个问题，但这也是不可取的(我只希望网页正文可以垂直滚动)。

我曾尝试提出替代的 CSS 解决方案，甚至是 Javascript 解决方案，但我想不出最终可行的解决方案。这真的不可能吗？

虽然我更喜欢 css 解决方案，但此时我对 javascript 解决方案持开放态度。

Answer 1

有一个fiddle有一个工作示例。您甚至可以通过预先声明宽度/高度来摆脱一些 javascript。

为您的原始示例添加了一些 id

<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead id="sticky">
      <tr id="headerRow">
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

下面是javascript

// When the user scrolls the page, execute addSticky 
window.onscroll = function() {addSticky()};
document.getElementById("wrapper").onscroll = function(){addSticky()};

// Get the header
var header = document.getElementById("sticky");

// Get the offset position
var sticky = header.offsetTop;

// Get bottom offset
var bottomOffset = document.getElementById("test").offsetHeight+100;


// Set the width of the row and columns by placing them in an array and looping said array
var headerRow = document.getElementById("headerRow");
header.style.width = headerRow.offsetWidth+"px";
var headerKids = headerRow.children;
for (var i=0; i<headerKids.length; i++){
  headerKids[i].style.width=headerKids[i].offsetWidth+"px";
}

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function addSticky() {
  if (this.scrollY > 100 && this.scrollY < bottomOffset ) {
    xScroll = document.getElementById("wrapper").scrollLeft;
    header.classList.add("sticky");
    header.style.left = "-"+xScroll+"px";
  } else {
    header.classList.remove("sticky");
  }
}

CSS 更新

.sticky {
  position: fixed;
  top: 0;
  height: 20px;
}