如何使用defineSetter在两个对象中正确设置scrollLeft？

在我的页面中，我有两个宽度相同的表格，它们都进行水平滚动。当每个表滚动时，我需要将两个表设置到相同的位置。

实际上，我的代码是：

var scrollA = $('#scrollA'),
    scrollB = $('#scrollB');

scrollA.on('scroll', function() {
    scrollB[0].scrollLeft = scrollA[0].scrollLeft;
});

有用。问题在于，在某些情况下，加载的数据足够大，会减慢浏览器和滚动事件的速度。

然后，我会尝试改善这些情况下的用户体验。

我做了这个片段，我尝试使用__defineSetter__的函数Object:

var elementA = { scrollLeft: 30 },
    elementB = { scrollLeft: 30 };

elementA.__defineSetter__('scrollLeft', val => elementB.scrollLeft = val);

elementA.scrollLeft += 5;
console.log(elementA.scrollLeft + ' == ' + elementB.scrollLeft);

但正如您所看到的，运行代码片段时，它会设置undefined to elementA.scrollLeft and NaN to elementB.scrollLeft.

我需要一些指导，谢谢您的宝贵时间。

滚动事件可以以很高的速率触发，因此您可以通过限制滚动事件处理程序来获得更平滑的滚动，正如 trincot 在他的回答中所说。您可以使用以下方法限制函数setTimeout。不过，当在屏幕上移动物体或处理其他可见效果时，我更喜欢requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame.

requestAnimationFrame在下次重绘之前运行回调，以便浏览器可以进行一些优化。

该代码将使您更接近解决方案，它基于这个例子来自MDN https://developer.mozilla.org/en/docs/Web/Events/scroll#Example:

var scrollA = $('#scrollA'),
    scrollB = $('#scrollB'),
    running = false;

scrollA.on('scroll', function() {
  // if we already requested an animation frame, do nothing
  if (!running) {
    window.requestAnimationFrame(function() {
      // synchronize table B and table A
      scrollB[0].scrollLeft = scrollA[0].scrollLeft
      // we're done here and can request a new frame
      running = false;
    });
  }

  running = true;
});

您可以使用传递给回调的时间戳来进一步消除同步，但如果您延迟太多，第二个表中的滚动可能会有点缓慢。