JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
</div>
<div class="row">
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum, reprehenderit explicabo necessitatibus et consectetur quod veritatis nesciunt est, ipsam unde repellat! Iure quam odio nihil non necessitatibus nobis molestias?
  </div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum,...

CSS

.row  {
  display: flex;
  margin: 10px 0;
}
.col {
  padding: 20px;
  border: 1px solid;
}

JavaScript

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();
});