2

В следующем коде есть два дива, которые я хочу синхронизировать. Когда правый скроллится, я изменяю transform левого, чтобы он он встал соответствующим образом. Но когда я кручу колёсиком мыши над левым, ничего не происходит. Я попытался передать это событие правому, но это не помогло.

Вариант с overflow у section не подходит, поскольку это всего лишь упрощённый пример.

// Этот код работает
// `.labels` двигается вместе со скроллом `.scrollable`
document.querySelector(".scrollable").addEventListener('scroll', function (e) {
  var dy = this.scrollTop;
  document.querySelector(".labels").style.transform = "translateY(" + -dy + "px)";
});

// Этот код НЕ работает
// Я хочу чтобы `.scrollable` скроллилось при попытке прокрутить `.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;
}

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>

PS: Этот вопрос на английском.

1 ответ 1

2

Можно смотреть дельту прокрутки и менять позицию scrollTop у .scrollable в зависимости от неё.

// Этот код работает
// `.labels` двигается вместе со скроллом `.scrollable`
document.querySelector(".scrollable").addEventListener('scroll', function (e) {
  var dy = this.scrollTop;
  document.querySelector(".labels").style.transform = "translateY(" + -dy + "px)";
});

document.querySelector(".labels").addEventListener('wheel', function (e) {
  document.querySelector(".scrollable").scrollTop -=e.wheelDeltaY;
  
  e.preventDefault();
});
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;
}

.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>
    Label 8<br>
    Label 9<br>
    Label 10<br>
    Label 11<br>
    Label 12<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>
    Line 8<br>
    Line 9<br>
    Line 10<br>
    Line 11<br>
    Line 12<br>
  </div>
</section>

1
  • Идея хорошая, к сожалению, сильно отличается от браузерной прокрутки, а в FF вообще скроллится по одному пикселю...
    – Qwertiy
    28 ноя 2017 в 12:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.