JSFiddle - React, Tailwind, and code Playground

HTML

<section id="about"></section>
<section id="services"></section>
<section id="gallery"></section>

CSS

#about{
 	width: 100%;
	min-height: 100vh;
  background-color: red;
}
#services{
 	width: 100%;
	min-height: 100vh;
  background-color: yellow;
}
#gallery{
 	width: 100%;
	min-height: 100vh;
  background-color: green;
}

JavaScript

$('#about').on('DOMMouseScroll mousewheel', function (e) {
	// scroll down
	if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    $('html, body').animate({
      scrollTop: $('#services').offset().top
    });
  }
});
$('#services').on('DOMMouseScroll mousewheel', function (e) {
  // scroll down
	if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    $('html, body').animate({
      scrollTop: $('#gallery').offset().top
    });
  //scroll up          
  } else {
    $('html, body').animate({
      scrollTop: $('#about').offset().top
    });  			
  }
});
$('#gallery').on('DOMMouseScroll mousewheel', function (e) {
	//scroll up
  if(e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
    $('html, body').animate({
      scrollTop: $('#services').offset().top
    });
  }
});