JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/vue-scrollto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id='app'>
    <div class='section-1'>{{msg}}</div>
    <div class='section-2'>{{msg}}</div>
    <div class='section-3'>{{msg}}</div>
    <div class='section-4'>{{msg}}</div>
    <div class='section-5'>{{msg}}</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
#app{
  display: flex;
}

.section-1,
.section-2,
.section-3,
.section-4,
.section-5 {
  min-height: 100vh;
  min-width: 100vh;
}

.section-1 {
  background-color: red;
}

.section-2 {
  background-color: green;
}

.section-3 {
  background-color: blue;
}

.section-4 {
  background-color: yellow;
}

.section-5 {
  background-color: orange;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    msg: 'asd',
    scrollPosition: 0,
    active: null,
    lastActive: null,
    lastScrollTop: window.pageYOffset || document.documentElement.scrollTop,
    scrollStarted: false,
    down: true
  },
  mounted() {
    this.active = 1
    this.lastActive = 1
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll(e) {
      let vm = this
      let options = {
          container: 'body',
          easing: 'ease-in',
          offset: 0,
          cancelable: false,
          onStart: function () {
            document.body.style.overflow = 'hidden'
          },
          onDone: _.debounce(function(element) {
            if (vm.down) vm.active++
            else vm.active--
            vm.scrollStarted = false
            document.body.style.overflow = 'auto'
          }, 100),
          x: false,
          y: true
        }
        let st = window.scrollY
        if (st > this.lastScrollTop) {
            this.down = true
          } else {
            this.down = false
          }
          this.lastScrollTop = st
      if (!this.scrollStarted) {
        this.scrollStarted = true
        if (this.down) {
          this.down = true
          if (this.active === 1) {
            VueScrollTo.scrollTo('.section-2', 500, options)
          } else if (this.active === 2) {
            VueScrollTo.scrollTo('.section-3', 500, options)
          } else if (this.active === 3) {
            VueScrollTo.scrollTo('.section-4', 500, options)
          } else if (this.active === 4) {
            VueScrollTo.scrollTo('.section-5', 500, options)
          }
        } else {
          if (this.active === 2) {
            VueScrollTo.scrollTo('.section-1', 500, options)
          } else if (this.active === 3) {
            VueScrollTo.scrollTo('.section-2', 500, options)
          } else if (this.active === 4) {
            VueScrollTo.scrollTo('.section-3', 500, options)
          } else if (this.active === 5)...