Link 在两个表格之间滚动

Question

我在同一页面上有两个相同大小的表格。我怎样才能 link 在它们之间滚动，这样当我在顶部向右滚动时它也会在底部向右滚动等等？

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

您可以将此代码添加到您的末尾，以 link 从顶部 table 滚动到底部 table:

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

Link 在两个表格之间滚动

Link Scrolling Between Two Tables

javascript

jquery

handsontable