Question

在以下代码段中，我必须div。当我尝试滚动其中任何一个时，我想要同步它们的位置。滚动第二个div时，我正在更改第一个div的transform并且它可以正常工作。但第一个div永远不会滚动。我试图将mousewheel事件传递给第二个事件，但它没有用。

我无法使section滚动 - 它只是一个简单的例子。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

PS：Same question in Russian.

Answer 1

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

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

css存在问题，您需要labels元素可滚动，并且要同步两个元素之间的滚动，您只需使用scrollTop。

我已经修改了你的例子以使其有效：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

这是<fragment android:name="ie.ucd.runtracker.MapFragment" android:id="@+id/workoutActivityMap" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2"/>唯一的解决方案..看看@CSS面板，如果你可以在周围环境中应用它，那就很简单

我们左边只有CSS shift元素：

.scrollable

margin-left: -60px;
padding-left: 60px;

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

section {
  border: 1px solid red;
  line-height: 2em;
  height: 8em;
  display: inline-block;
  overflow: hidden;
}

div {
  display: inline-block;
  vertical-align: top;
  padding: 0 .25em;
  box-sizing: border-box;
  position: relative;
}

.scrollable {
  max-height: 100%;
  overflow: auto;
  margin-left: -60px;
  padding-left: 60px;
}

.labels {
  background: silver;
}

.as-console-wrapper.as-console-wrapper {
  max-height: 70px;
}

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

2 个答案: