Ember.js 如何在Ember中构建具有固定第一列和标题行的延迟加载表？

我正在尝试在Ember 2.0中使用以下内容构建一个表：

• 多达一百万行（因此我需要延迟渲染）
• 固定标题行
• 垂直滚动的固定第一列
• 垂直和水平滚动的内容列

这方面的一个很好的例子是本页的第一个表：

不幸的是，在ember 2.0+中，ember表存在性能问题，所以我试图找出如何使用ember集合推出自己的表

以下是我目前为止所做的一件事：

我使用了两个Ember集合—一个用于第一列，另一个用于可滚动内容

<div class='table-container'>
  <div class='header-container'>
    <div class="column-headers" style="width: 1500px">
      {{#each model.columnHeaders as |columnHeader|}}
        <div class='table-cell'>
          {{columnHeader}}
        </div>
      {{/each}}
    </div>
  </div>
  {{#ember-collection 
    items=model.rowHeaders 
    classNames='fixed-column'
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-change=(action 'scrollChange')
    as |rowHeader|
  }}
    {{rowHeader}}
  {{/ember-collection}}

  {{#ember-collection 
    items=model.content
    classNames='scrolling-content' 
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-left=scrollLeft
    scroll-change=(action 'scrollChange')
    as |item|
  }}
    {{#each item as |cell|}}
      <div class='table-cell'>
        {{cell}}
      </div>
    {{/each}}
  {{/ember-collection}}
</div>

（编辑）被亨利的评论所回答——目标是错误的部门

如何定位第二个余烬集合，使其不与第一个重叠

---

我试着用CSS来做，但是

position:absolute

会使集合消失。我不知道如何定位它。

我可以回答你第二个问题。您将滚动应用到错误的div。它应该是

Ember.$（'.header container'）。scrollLeft（scrollLeft）滚动的那个，不是它的内部。非常感谢！我更新了我的Twiddle和question以反映这一点。可以通过使用div和类似这样的类包装
ember集合
s来解决标题与正文的重叠问题。表体{position:absolute；width:400px；height:500px；}

。

Ember.$('.column-headers').scrollLeft(scrollLeft);