ui-scroll 使用相同数据源的两个表并同步滚动两个表

Question

我在我的应用程序中使用ui-scroll 并遇到了一些问题。

我想在用于构建两个表的同一数据源上运行 ui-scroll，并且通过滚动一个表，它还应该滚动通过同一数据源创建的另一个表。

我尝试使用以下示例代码来实现这一点，但它不起作用。

当滚动任何表格时，列表的行为很奇怪；它会增加列表的大小并显示空行。它可以在附加的 plunker 中注意到。

如果我更改数据，它只会影响第一个表，而第二个不会更新列表。

我也无法同步（抱歉这个愚蠢的问题，如果有人可以帮忙的话）。

这是我的做法：

模板：

<table border="1"> 
  <tbody>
    <td>
      <table> 
        <tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td> 
      <table>
        <tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
</table>

控制器：

var datasource = {};
datasource.get = function (index, count, success) {
    $timeout(function () {
        var result = [];
        for (var i = index; i <= index + count - 1; i++) {
            result.push("item #" + i);
        }
        success(result);
    }, 100);
};
$scope.datasource = datasource;

https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

任何帮助将不胜感激。 TIA

当滚动太快时，ui-scroll 为某些滚动计算添加的第一行和最后一行的高度往往大于 100 像素。如何解决它们？我可以隐藏它们吗？

这是显示其外观的图片：

Answer 1

在这些模板中显示 css-property 出现问题，将两个视口提取到单独的 div 容器中似乎是个好主意...以下代码修复了空行问题：

<table border="1"> 
  <tbody>
    <td>
      <div ui-scroll-viewport style="height: 400px;">
        <table> 
          <tbody id="first-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td> 
      <div ui-scroll-viewport style="height: 400px;">
        <table>
          <tbody id="second-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tbody>
</table>

更新的演示在这里：https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7

---

关于 2 个视口滚动同步，我猜，以下方法可能有效：

$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
    var result = [];
    for (var i = index; i <= index + count - 1; i++) {
        result.push("item #" + i);
    }
    success(result); 
};

const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
    vp2.scrollTop = vp1.scrollTop;
});

其中“vp1”和“vp2”是视口的ID。