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

两个表之间的链接滚动

1 个答案: