Одновременная прокрутка

Question

Я делаю одновременную прокрутку в 2 деления, когда пользователь прокручивает деление номер 1, другой сопровождает. Код работает, но прокрутка очень медленная. Какие-либо предложения? Мой код ниже

var elems = document.getElementsByClassName("container");


function foo() {
    var top = this.scrollTop;
    
    for (i = 0; i < elems.length; i++) {
        elems[i].scrollTop=top;
        top.preventDefault()
    }
  
}

for (i = 0; i < elems.length; i++) {
    elems[i].addEventListener("scroll", foo);
}

.container {
  height: 400px;
  overflow-y: scroll;
  width: 200px;
  background: Red;
  float: left;
}
.container.fixed {
  background-color: orange;
  position: fixed;
}
.container.fixed span {
  width: calc(100% - 50px);
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}
.container.normal {
  margin-left: 220px;
  width: 800px;
}
.container.normal span {
  width: 300%;
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}

<div class="parent">
    <div class="container fixed">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
    <div class="container normal">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>

Answer 1

Причина, по которой прокрутка кажется неработоспособной, заключается не в проблеме регулирования. Это происходит потому, что когда вы запускаете событие прокрутки из элемента .container, оно фактически пытается одновременно установить собственный scrollTop. Вы должны устанавливать scrollTop только для элементов, которые не прокручиваются активно.

Для этого не используйте e.preventDefault(), так как это напрямую предотвращает прокрутку. Вы можете просто добавить предложение if в for l oop, которое проверяет, является ли текущий элемент, который повторяется, элементом, инициирующим событие, то есть:

if (elems[i] === this) {
    elems[i].scrollTop = top;
}

Кроме того, поскольку у вас есть нет намерений остановить событие прокрутки, я бы добавил параметр { passive: true } для повышения производительности при привязке слушателя события:

elems[i].addEventListener("scroll", foo, { passive: true });

См. пример проверки концепции:

var elems = document.getElementsByClassName("container");


function foo() {
  var top = this.scrollTop;

  for (i = 0; i < elems.length; i++) {
    if (elems[i] !== this)
      elems[i].scrollTop = top;
  }

}

for (i = 0; i < elems.length; i++) {
  elems[i].addEventListener("scroll", foo, { passive: true });
}

.container {
  height: 400px;
  overflow-y: scroll;
  width: 200px;
  background: Red;
  float: left;
}

.container.fixed {
  background-color: orange;
  position: fixed;
}

.container.fixed span {
  width: calc(100% - 50px);
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}

.container.normal {
  margin-left: 220px;
  width: 800px;
}

.container.normal span {
  width: 300%;
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}

<div class="parent">
  <div class="container fixed">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="container normal">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Answer 2

Должно работать.

var elems = document.getElementsByClassName("container");
var scrollState = 0;

function foo() {
    const elements = [... elems];
    const scrolled = elements.find(elem => elem.scrollTop !== scrollState);
    if(scrolled) {
        const newTop = scrolled.scrollTop;
        elements.forEach(element => {
            element.scrollTop = newTop;
        });
        scrollState = newTop;
    }
}

window.setInterval(foo, 30);

.container {
  height: 400px;
  overflow-y: scroll;
  width: 200px;
  background: Red;
  float: left;
}
.container.fixed {
  background-color: orange;
  position: fixed;
}
.container.fixed span {
  width: calc(100% - 50px);
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}
.container.normal {
  margin-left: 220px;
  width: 800px;
}
.container.normal span {
  width: 300%;
  margin: 25px;
  background-color: black;
  height: 100px;
  display: block;
}

<div class="parent">
    <div class="container fixed">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
    <div class="container normal">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>