БЛОГ НА HUSL


Не работает resize(javascript)?

Автор вопроса: tiptop88

При ширине экране менее 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 шт):

Автор решения: Laukhin Andrey

Не стоит вызывать 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();
→ Ссылка

licensed under cc by-sa 3.0 with attribution.