intersection Observer Scrolling

index.html

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">


<main data-mhm-scroll-sections>

  <section class="bg-center bg-cover" data-mhm-scroll-section="0">
    <h2>Section 1</h2>
  </section>

  <section class="bg-center bg-cover" data-mhm-scroll-section="1">
    <h2>Section 2</h2>
  </section>

  <section class="bg-center bg-cover" data-mhm-scroll-section="2">
    <h2>Section 3</h2>
  </section>

  <section class="bg-center bg-cover" data-mhm-scroll-section="3">
    <h2>Section 4</h2>
  </section>

  <section class="bg-center bg-cover" data-mhm-scroll-section="4">
    <h2>Section 5</h2>
  </section>

  <nav class="fixed pin w-full h-full">
    <i class="absolute pin-x pin-t text-center mt-12 fas fa-caret-up" data-mhm-scroll-arrow="up"></i>
    <i class="absolute pin-x pin-b text-center mb-12 fas fa-caret-down" data-mhm-scroll-arrow="down"></i>
  </nav>

</main>

intersectionObserverScrolling.js

const handleScrollingEvent = (sections,arrows) => {
  let currentSection = '0'
  const lastSection = sections.length - 1,
        arrowUp = document.querySelector('[data-mhm-scroll-arrow="up"]'),
        arrowDown = document.querySelector('[data-mhm-scroll-arrow="down"]')

  const jumpTo = arrow => {
    const up = arrow.getAttribute('data-mhm-scroll-arrow') === 'up',
          down = arrow.getAttribute('data-mhm-scroll-arrow') === 'down',
          sectionToScrollToID = up ? Number(currentSection) - 1 : Number(currentSection) + 1,
          sectionToScrollTo = document.querySelector(`[data-mhm-scroll-section="${sectionToScrollToID}"]`),
          sectionToScrollToScrollY = sectionToScrollTo.getBoundingClientRect().top

    window.scrollTo({
      top: sectionToScrollToScrollY + window.scrollY,
      behavior: 'smooth'
    })
  }

  const observerProps = {
    opts: {
      root: null,
      rootMargin: '0px',
      threshold: 0.75
    },
    updateCurrentSection: e => {
      // Update currentSection
      if(e[0].intersectionRatio >= 0.75) {
        currentSection = e[0].target.getAttribute('data-mhm-scroll-section')
      }
      // Toggle Arrows conditionally to first/last section 
      if(Number(currentSection) === lastSection) {
        arrowDown.style.display = 'none'
      } else if (Number(currentSection) === 0) {
        arrowUp.style.display = 'none'
      } else {
        arrowUp.style.display = 'block'
        arrowDown.style.display = 'block'
      }
    }
  }

  sections.forEach(section => {
    const obs = new IntersectionObserver(observerProps.updateCurrentSection, observerProps.opts)
    obs.observe(section)
  })

  arrows.forEach(arrow => {
    arrow.addEventListener('click', e => jumpTo(e.target))
  })
}


const scrollingSections = () => {
  const sections = document.querySelectorAll('[data-mhm-scroll-section]'),
        arrows = document.querySelectorAll('[data-mhm-scroll-arrow]')

  handleScrollingEvent(sections, arrows)
}


scrollingSections()

style.scss

body, main {
  padding: 0;
  margin: 0;
  
  section {
  display: block;
  height: 100vh;
  max-height: 1080px;
    &:nth-child(even){
      background-color: grey;
      background-image: url('https://images.unsplash.com/photo-1496284045406-d3e0b918d7ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=2734&q=80');
    }
    &:nth-child(odd){
      background-color: green;
      background-image: url('https://images.unsplash.com/photo-1534270804882-6b5048b1c1fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80');

    }
    h2 {
      font-size: 3rem;
      display: block;
      text-align: center;
      padding: 1rem;
      color: #fff;
      text-shadow: 0 0 6px #000;
    }
  }
  i {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 6px #000;
    z-index: 999999;
    position: relative;
  }
}