Смена картинок при скролле?

Question

[96Nick]

Всем привет! Помогите пожалуйста, как можно сделать чтоб при скролле левого контента (включая скролл через скроллбар) менялся активный класс для картинки codepen

Answer 1

[RAX7]

const boxScroll = document.querySelector('.box__list_scroll');
const boxImgs = document.querySelectorAll('.box__imgs > .box__img');

boxScroll.addEventListener('scroll', event => {
  const sh = event.target.scrollHeight;
  const h = event.target.offsetHeight;
  const y = event.target.scrollTop;
  const len = boxImgs.length;
  const t = y / (sh - h);
  const index = Math.floor((len - 1) * t);
  boxImgs.forEach((img, i) => img.classList.toggle('__active', i === index));
});

Перечитай как правильно использовать БЭМ и не растягивай больше так кошек!

Comments

[96Nick]

простите за кошечек(
Большое спасибо