Как сделать плавную прокрутку (без jquery)?

Question

[rovercar]

В общем у меня есть статьи по 5 в ряд одинаковой высоты, несколько рядов на странице, как сделать плавную прокрутку без использования jquery? Нужно, чтобы прокручивался за раз только один ряд.

Answer 1

[Сергей delphinpro]

jsfiddle.net/vxgpam5w

spoiler

let data = [];
let currentRow = 0;

function getPositions(){
  document.querySelectorAll('.row').forEach(row => {
    let box = row.getBoundingClientRect();
    data.push(box.top + pageYOffset);
  });
}

getPositions();

document.addEventListener('wheel', event => {
  event.preventDefault();
	currentRow += event.deltaY > 0 ? 1 : -1;
  if (currentRow<0) currentRow = 0;
  if (currentRow>data.length-1) currentRow = data.length-1;
  window.scrollTo({
   	top: data[currentRow],
    behavior: 'smooth'
  });
});

window.addEventListener('resize', () => {
	getPositions();
});

Comments

[rovercar]

Спасибо! Но сейчас если сильно крутануть колёсико мыши, тогда прокрутиться больше, чем на 1 ряд, можно как-то сделать, чтобы в независимости от того, с какой силой прокрутил, всегда бы прокручивался только 1 ряд?

[Сергей delphinpro]

rovercar, Конечно. Всё в ваших руках. Debounce function