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

Question

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

其实我的代码是:

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

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

它有效。问题是在某些情况下加载的数据大到足以减慢浏览器和滚动事件的速度。

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

---

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

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

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

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

但是正如您在运行代码片段时看到的那样，它将 undefined 设置为 elementA.scrollLeft 并将 NaN 设置为 elementB.scrollLeft.

我需要一些指导，感谢您抽出时间。

Answer 1

滚动事件可以高速触发，因此您可以通过限制滚动事件处理程序来获得更流畅的滚动，正如 trincot 在他的回答中所说的那样。您可以使用 setTimeout 限制函数。但是，在屏幕上移动东西或处理其他可见效果时，我更喜欢 requestAnimationFrame .

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

此代码将使您更接近解决方案，它基于 this example from MDN :

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;
});

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