javascript - 使用 css 和 javascript 固定行/列标题

Question

我需要一个具有固定列/行标题的布局。经过一些“反复试验”后，我想出了这个解决方案(参见 jsfiddle )。只有右下方的 Pane 是可滚动的，标题是使用 javascript 移动的。

在 Chrome 中一切都很好，但在 IE/Edge 中滚动是滞后的:左侧和右侧部分不会同时滚动，但延迟很小(尤其是内容“大”)，这很烦人.你看到任何解决方案吗？我必须找到另一种方法来实现这个结果(在这种情况下你有什么建议吗)？

$(function() {
    init();

});

function init(){
    var div1=$("#mainContainer");
    
    var oldScrollTop = $(div1).scrollTop();

    $(div1)
        .scroll( function () {
            if (oldScrollTop == $(div1).scrollTop()){
                scrollRowTableHeader(); //horizontal scroll
            }else {
                oldScrollTop = $(div1).scrollTop();
                scrollColumnTableHeader(); //vertical scroll
            }
        });

}

function scrollColumnTableHeader() {

    var vScrollPanel = $("#mainContainer"),
        headerPanelContent = $("#headerPanelContent"),
        colHeaderPanelContent = $("#colHeaderPanelContent");

    var colHeaderPanelContent2 = document.getElementById('headerContent');

    colHeaderPanelContent2.style.top = (0 - vScrollPanel.scrollTop())+"px";

};

function scrollRowTableHeader() {

    var vScrollPanel = $("#mainContainer"),
        headerPanelContent = $("#headerPanelContent"),
        colHeaderPanel = $("#colHeaderPanel");

    var headerPanelContent2 = document.getElementById('headerPanelContent');

    headerPanelContent2.style.left = (0 - vScrollPanel.scrollLeft())+"px";

};

#container {
    /*background-color: green;*/
    display: flex;
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}

.bigContent{
  height: 1000px;
  width: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
  width: 500px;
}

.colheader{
  height: 300px;
  width: 200px;
  /*position: relative;*/
  z-index: 1;
  overflow:hidden;
  display: inline;
  border: solid 1px;
}

.headerContent{
  background: lightgrey;
  height: 1000px;
  width: 200px;
  position: relative;
  border: solid 1px;
}

.rowHeaderContent{
  background: whitesmoke;
  height: 100px;
  width: 200px;
  position: relative;
}

.rowColHeaderContent{
  background: lightyellow;
  height: 100px;
  width: 200px;
  border: solid 1px;
}

.headerPanel{
  overflow: hidden;
  width: 500px;
  border: solid 1px;
}

.tableProperties{
  table-layout: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div id="header" class="header">
    <div class="rowColHeaderContent">
        <table class="tableProperties">
          <tr><td>Row/Col Header</td></tr>
        </table> 
    </div>
  </div>
    <div id="headerPanel" class="headerPanel">
      <div id="headerPanelContent" class="rowHeaderContent">
         <table width="500px" class="tableProperties">
         <colgroup><col width="50"><col width="40"><col width="40"><col width="40"><col width="45"><col width="40"></colgroup>
            <tr><td>Some content (header)</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>


<div id="container">
  <div id="colheader" class="colheader">
    <div id="headerContent" class="headerContent">
        <table width="500px" class="tableProperties">
          <tr><td>Column Header</td></tr>
          <tr><td>Column Header</td></tr>
          <tr><td>Column Header</td></tr>
          <tr><td>Column Header</td></tr>
          <tr><td>Column Header</td></tr>
          <tr><td>Column Header</td></tr>
        </table>
    </div>
  </div>
    <div id="mainContainer" class="item scroll">
      <div class="bigContent">
         <table width="500px" class="tableProperties">
         <colgroup><col width="50"><col width="40"><col width="40"><col width="40"><col width="45"><col width="40"></colgroup>
            <tr><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

Answer 1

所以，这不是您非常复杂问题的直接答案，但这里是..

首先看起来您正处于尝试创建固定列和固定行表的第一步。起初它似乎可以工作，但是，相信我，您尝试实现它的方式不会很好地工作，原因是因为表格单元格宽度是为 each 任意设置的表格，您将无法将标题 表格与其下方的内容 表格对齐。因此，您要么必须采用与当前采用的方式不同的方法 - 提示即将到来。

首先，在这种情况下大量数据的问题在 IE11 中更为明显 - I​​E edge 中的延迟较轻，而在其他浏览器中则没有延迟。在您的情况下，您可以使用 debouncing 来减少滚动时的 js 调用。

setInterval(function(){                 
  // Scroll stuff here
}, 2)

间隔不一定要高，轻微 滞后是可见的，但与(我想)它目前的工作方式相比，这将是一个很大的改进。

也尝试使用影响最小的 Javascript 函数，例如使用 .attr 而不是 .style；也可以尝试使用 CSS3 转换而不是普通转换。

所以关于不同的方法 - 您必须以某种方式将滚动标题和内容放在同一个表中 - 理想情况下也是固定列。这里有一些提示。有必要使用 white-space:nowrap 删除表格单元格内的自动换行，以便以下提示按预期工作。这个概念可能难以理解，但一旦您遇到每个问题，它们就会变得有意义。

首先向表格添加一些顶部填充，以容纳接下来描述的标题元素。在标题单元格内创建 p 和 span 元素，并在这两个元素中放置相同的标题内容。使用 CSS3 转换将 span 元素绝对定位到顶部。

“p”元素将保持静态，但不可见 - 使用 visibility、opacity 和 height:0 隐藏它们。如果第 th 内容超过 td 内容，将使用段落元素。

为了以良好的性能滚动所有内容，您必须使用 CSS3 转换来滚动 span 元素(小心:span 元素!)页面加载。

希望这些提示对您有所帮助，如有任何问题，请随时提出 - 一开始很难消化，但它会很有意义。