javascript - 强制其他 div 在我的 `wheel` 上滚动

Question

在下面的代码片段中，我必须使用 div。当我尝试滚动其中任何一个时，我想同步它们的位置。当第二个 div 滚动时，我正在更改第一个 div 的 transform 并且它起作用了。但是第一个 div 永远不会滚动。我尝试将 mousewheel 事件传递给第二个事件，但没有成功。

而且我无法使 section 可滚动 - 这只是一个简化的示例。

// This code works
// `.labels` moves together with scroll of `.scrollable`
document.querySelector(".scrollable").addEventListener('scroll', function (e) {
  var dy = this.scrollTop;
  document.querySelector(".labels").style.transform = "translateY(" + -dy + "px)";
});

// This code does NOT work
// I want `.scrollable` to be scrolled when I try to scroll `.labels`
document.querySelector(".labels").addEventListener('wheel', function (e) {
  console.log(Date.now());
  document.querySelector(".scrollable").dispatchEvent(new MouseEvent(e.type, e));
});

section {
  border: 1px solid red;
  line-height: 2em;
  height: 8em;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

div {
  display: inline-block;
  vertical-align: top;
  padding: 0 .25em;
}

.scrollable {
  max-height: 100%;
  overflow: auto;
}

.labels {
  background: silver;
}

.as-console-wrapper.as-console-wrapper {
  max-height: 70px;
}

<section>
  <div class="labels">
    Label 1<br>
    Label 2<br>
    Label 3<br>
    Label 4<br>
    Label 5<br>
    Label 6<br>
    Label 7<br>
  </div><div class="scrollable">
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
  </div>
</section>

附言:Same question in Russian.

Answer 1

[编辑]如果您打算在 Firefox 上使用 mousewheel 事件，请考虑阅读其他 SO 问题:mousewheel event is not triggering in firefox browser

[编辑 2]对代码片段的新编辑，检查上面的注释以了解上下文。

---

CSS 有一个问题，您需要 labels 元素可滚动，并且要同步两个元素之间的滚动，您可以简单地使用 scrollTop。

我已经修改了你的示例以使其工作:

var scrollableEl = document.querySelector(".scrollable");
var labelsEl = document.querySelector(".labels");

scrollableEl.addEventListener('scroll', function (e) {
  labelsEl.style.transform = `translateY(${ -scrollableEl.scrollTop }px)`;
  e.preventDefault();
});

labelsEl.addEventListener('wheel', function (e) {
  scrollableEl.scrollTop += (e.deltaY / 2);
  e.preventDefault();
});

section {
  border: 1px solid red;
  line-height: 2em;
  height: 8em;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

div {
  display: inline-block;
  vertical-align: top;
  padding: 0 .25em;
}

.scrollable {
  max-height: 100%;
  overflow: auto;
}

.labels {
  background: silver;
}

.as-console-wrapper.as-console-wrapper {
  max-height: 70px;
}

<section>
  <div class="labels">
    Label 1<br>
    Label 2<br>
    Label 3<br>
    Label 4<br>
    Label 5<br>
    Label 6<br>
    Label 7<br>
  </div><div class="scrollable">
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
  </div>
</section>

我已经创建了一个新类来重用 css，所以期望 javascript 查询选择器从 .scrollable--pane 类中获取元素。