在本机 JavaScript 中同步 2 个 div 之间的滚动（2020）

Question

我正在尝试制作一个假/重复的滚动元素，该元素与本机 javaScript 中 div 的实际 x 滚动同步。对我来说，用例是在一张长桌子上，当您不在桌子底部时，屏幕上会显示 x 滚动条。

这解决了一个非常宽的表格的情况，其最小宽度超过当前页面/视图端口宽度，导致表格横向/横向滚动。但是，如果表格很长，则只能将滚动设置在表格的顶部或底部。这意味着，如果人们位于表格中间并想要滚动查看所有列，他们将很难在那里做到这一点。

看图片：

是的，JQUERY 已经把它搞死了。根据我的研究，SO 上没有人知道或有兴趣在本机 javaScript 中执行此操作（尤其是 2020 年）。我的参考版本也是jQuery的，需要转换。

  $dupScroll.scroll(function () {
    if (scrolling) {
      scrolling = false;
      return true;
    }
    scrolling = true;
    $tableParent.scrollLeft($dupScroll.scrollLeft());
  });
  $tableParent.scroll(function () {
    if (scrolling) {
      scrolling = false;
      return true;
    }
    scrolling = true;
    $dupScroll.scrollLeft($tableParent.scrollLeft());
  });

所有 jQuery 解决方案：

1. 如何同时滚动两个div？
2. 同步2个div之间的滚动
3. 在具有不同文本大小的 2 个 div 之间同步滚动
4. 如何通过ID同步两个div的滚动
5. 同步两个div的滚动

感谢您的帮助，并且对于所有需要在 jQuery 后执行相同操作的人来说都是有用的。我目前正在自己​​研究这个问题，但到处遇到障碍，第一个是将滚动事件附加到元素上。如果我做了一些有用的东西，我会把它发布在这里。谢谢。

Answer 1

这是保持两个 div 对齐的简单方法。默认情况下，Javascript 不会在脚本的操作上调度事件，因此无需跟踪正在滚动的 div。

const divs = document.querySelectorAll( 'div' );

divs.forEach(div => div.addEventListener( 'scroll', e => {
  
  divs.forEach(d => {
  
    d.scrollTop = div.scrollTop;
    d.scrollLeft = div.scrollLeft;
  
  });
  
}) );

html, body {

  height: 100%;
  
}
body {

  display: flex;
  padding: 0;
  margin: 0;

}
div {

  width: 50%;
  height: 100%;
  overflow: scroll;

}
span {

  width: 200vw;
  height: 300vh;
  display: block;
  background: linear-gradient(90deg, transparent, yellow), linear-gradient( 0deg, red, blue, green );
  
}
#div2 {

  margin-top: 30px;
  
}

<div id="div1"><span></span></div>
<div id="div2"><span></span></div>

在不同大小的容器中具有相对滚动

如果您想使用不同大小的容器和相对滚动来实现此目的，只需标准化滚动值并再次相乘即可：

const divs = document.querySelectorAll( 'div' );

divs.forEach(div => div.addEventListener( 'scroll', e => {
  
  const offsetTop = div.scrollTop / (div.scrollHeight - div.clientHeight);
  
  const offsetLeft = div.scrollLeft / (div.scrollWidth - div.clientWidth);
  
  divs.forEach(d => {
  
    d.scrollTop = offsetTop * (d.scrollHeight - d.clientHeight);
    d.scrollLeft = offsetLeft * (d.scrollWidth - d.clientWidth);
    
  });
  
}) );

html, body {

  height: 100%;
  
}
body {

  display: flex;
  padding: 0;
  margin: 0;

}
div {

  width: 50%;
  height: 100%;
  overflow: scroll;

}
span {

  width: 200vw;
  height: 300vh;
  display: block;
  background: linear-gradient(90deg, transparent, yellow), linear-gradient( 0deg, red, blue, green );
  
}
#div2 span {
  
  height: 500vh;
  width: 500vw;
  
}

<div id="div1"><span></span></div>
<div id="div2"><span></span></div>