Question

我需要一个带有固定列/行标题的布局。经过一些“反复试验”，我想出了这个解决方案（见jsfiddle）。只有右下方的窗格是可滚动的，标题是使用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

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

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

首先，在IE11中，大量数据的问题在IE11中更加明显 - IE边缘的滞后更轻，其他浏览器也没有滞后。在您的情况下，您可以使用 debouncing 来减少滚动时的js调用。

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

间隔不必高，可以看到光延迟，但与目前的工作方式（我猜）相比，这将是一个很大的进步。

同时尝试使用效果最小的Javascript函数，例如使用.attr代替.style;也尝试使用CSS3转换而不是正常的转换。

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

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

＆＃39; p＆＃39;元素将保持静态但不可见 - 使用visibility，opacity和height:0隐藏它们。如果th内容超出td内容，则会使用段落元素。

为了滚动所有具有良好性能的内容，您必须使用CSS3转换来滚动span元素（小心：span元素！）在页面加载后缓存它们。

希望这些提示可以帮助您，因为任何问题都可以随意提出 - 一开始很难消化，但这是有意义的。

Answer 2

如果您想要只有右下方窗格可滚动？
我刚用过css： -

.headerContent { 背景：lightgrey; 身高：1000px; 宽度：200px; 位置：静态; 边框：实心1px; }
更改了position: relative into static ...

使用css和javascript修复了行/列标题

2 个答案: