JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css">
<div id="fullpage">
  <div class="section section-home">
    <h1>home</h1>
  </div>
  <div class="section section-content">
    <h1>1</h1>
  </div>
  <div class="section section-content">
    <h1>2</h1>
  </div>
  <div class="section section-content">
    <h1>3</h1>
  </div>
  <div class="section section-content">
    <h1>4</h1>
  </div>
  <div class="section section-footer">
    <h1>footer</h1>
  </div>
</div>
<div id="test"></div>

CSS

h1 {
  font-size: 50px;
  margin: 0;
}

#test {
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.section-home {
  text-align: center;
  background: blue;
  color: #fff;
}

.section-content {
  text-align: center;
  background: green;
  color: #fff;
}

.section-footer {
  height: 100px;
  text-align: center;
  background: purple;
  color: #fff;
}

JavaScript

var delay = 1000,
    curSlide = 1,
    moveTo = 1,
    timer = false,
    anch = [
      'section-home', 'content-1',
      'content-2', 'content-3',
      'content-4', 'section-footer'
    ];
  $(document).bind("wheel", function(e) {

    moveTo += e.originalEvent.deltaY > 0 ? 1 : -1;
    if (moveTo > anch.length)
      moveTo = anch.length;
    if (moveTo < 1)
      moveTo = 1;
    if (!timer) {
      timer = true;
      timer = setTimeout(f, delay);
    }
    $("#test").html("Moved to " + moveTo+" slide")
    return false;
  });
  var f = function() {
    if (curSlide < moveTo)
      $.fn.fullpage.moveTo(++curSlide);
    else if (curSlide > moveTo)
      $.fn.fullpage.moveTo(--curSlide);
    else {
      timer = false;
      return;
    }
    timer = setTimeout(f, delay);
  };
  $('#fullpage').fullpage({
    anchors: anch,
    scrollingSpeed: 0
  });
  $.fn.fullpage.setAllowScrolling(false);