链接在两个表之间滚动

Question

我在同一页面上有两个大小相同的表格。 如何链接它们之间的滚动，以便当我在顶部向右滚动时它也会在底部向右滚动等？

http://plnkr.co/edit/tXpr9hRGTDUEnrjEwr7w

<div class="scroll-left">
  <div id="example1"></div>
</div>
<div class="scroll-right">
  <div id="example2"></div>
</div>

document.addEventListener("DOMContentLoaded", function() {

function getData() {
  var data = [
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0]
  ];
  return data;
}

var example1 = document.getElementById('example1');
var example2 = document.getElementById('example2');

var hot1 = new Handsontable(example1, {
  data: getData(),
  rowHeaders: true,
  colHeaders: true,
});

var hot2 = new Handsontable(example2, {
  data: getData(),
  rowHeaders: true,
  colHeaders: true,
});



});

Answer 1

您可以将此代码添加到您的末尾以链接从顶部表格到底部表格的滚动：

var $eg1holder = $(example1).find('.wtHolder');
var $eg2holder = $(example2).find('.wtHolder');

$eg1holder.scroll(function() {
  var x = $(this).scrollTop();
  var y = $(this).scrollLeft();
  $eg2holder.scrollTop(x).scrollLeft(y);
});

http://plnkr.co/edit/vCn8Fru5SWTT6Sn99p33