0

При ширине экране менее 768px красный блок должен сколлится вместе с желтым, происходит сейчас это только если на ширине экране менее 768px перезагрузить страницу, подскажите почему может не работать resize? Спасибо

https://jsfiddle.net/jb9Lcv2d/3/

function scrollCompare() {

  let speed = 2; // Скорость скролла.

  let scroll = document.querySelector('.compare__body');
  let scrollMainBlock = document.querySelector('.compare__main-column');

  let left = 0;
  let drag = false;
  let coorX = 0;
  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX;
  });

  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
  });
  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left - (e.pageX - coorX) * speed;
    }
  });
  if (window.innerWidth > 768) {
    scroll.addEventListener('scroll', function(e) {
      scrollMainBlock.style.transform = 'translateX(' + this.scrollLeft + 'px)';
    });
  };


};

scrollCompare();
window.addEventListener('resize', scrollCompare);
.compare__body {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  height: 400px;
}

.compare__main-row {
  width: 310px;
  min-height: 80px;
  background: red;
}

.compare__product-row {
  width: 330px;
  min-height: 80px;
   background: yellow;
}


.compare__body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
<div class="compare__wrap">
  <div class="compare__block">
    <div class="compare__scroll">
      <div class="compare__content">
        <div class="compare__body">
          <div class="compare__main-column">
            <div class="compare__main-row head-row"></div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
            <div class="compare__main-row">Цена</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
            <div class="compare__product-row">1002</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ответ 1

1

Не стоит вызывать scrollCompare() более одного раза, поскольку здесь добавляются обработчики событий. При повторном вызове, к существующим обработчикам добавятся новые, что потенциально ведет к катастрофе.

Условие if (window.innerWidth > 768) нужно разместить внутри обработчика, а при событии resize можно инициировать событие scroll.

Рекомендую добавить user-select: none в .compare__body, чтобы прокрутке ничего не мешало.

function scrollCompare() {

  let speed = 2; // Скорость скролла.

  let scroll = document.querySelector('.compare__body');
  let scrollMainBlock = document.querySelector('.compare__main-column');

  let left = 0;
  let drag = false;
  let coorX = 0;

  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX;
  });

  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
  });

  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left - (e.pageX - coorX) * speed;
    }
  });

  scroll.addEventListener('scroll', function(e) {
    if (window.innerWidth > 768)
      scrollMainBlock.style.transform = 'translateX(' + this.scrollLeft + 'px)';
    else scrollMainBlock.style.transform = '';
  });

  window.addEventListener('resize',
    e => scroll.dispatchEvent(new CustomEvent('scroll'))
  );
};

scrollCompare();

UPD
Если поддержка IE не нужна, лучше использовать липкое позиционирование position: sticky и медиа-запросы @media. В этом случае, нам не нужны обработчики для scroll и resize.

@media (min-width: 768px) {
  .compare__main-column {
    position: sticky;
    left: 0;
  }
}
function scrollCompare() {

  let speed = 2; // Скорость скролла.

  let scroll = document.querySelector('.compare__body');
  let scrollMainBlock = document.querySelector('.compare__main-column');

  let left = 0;
  let drag = false;
  let coorX = 0;

  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX;
  });

  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
  });

  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left - (e.pageX - coorX) * speed;
    }
  });
};

scrollCompare();

Ваш ответ

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

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