JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<script src = "https://raw.githack.com/CristianDavideConte/universalSmoothScroll/master/js/universalsmoothscroll-min.js"></script>
<body onload = init()>


<main class="outer-wrapper">
    <div class="wrapper">
        <article class="section" id="a">
        <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
        <article class="section" id="b">
                <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
        <article class="section" id="c">
                <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
        <article class="section" id="d">
                <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
        <article class="section" id="e">
                <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
        <article class="section" id="f">
                <h2>01</h2>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, <br>sed do eiusmod tempor <br>incididunt ut labore<br> et dolore magna aliqua.</p></article>
    </div>
</main>


<!-- MENU _____________________ -->


<header class="large">
    <div class="container">
      <nav>
        <a href="#welcome"><div class="logo"></div></a>
          <ul>
            <li><a href="#a">01</a></li>
            <li><a href="#b">02</a></li>
            <li><a href="#c">03</a></li>
            <li><a href="#d">04</a></li>
         </ul>
      </nav>
   ...

CSS

body {
  margin: 0;
  padding: 0;
}

.outer-wrapper {
  height: 100vh;
  width: 200vw;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
}

::-webkit-scrollbar {
  display: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.section {
  color: #000;
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
}

#a { background-color: #ccc; }
#b { background-color: #fff; }
#c { background-color: #ccc; }
#d { background-color: #fff; }
#e { background-color: #ccc; }
#f { background-color: #fff; }


h2 {
  float: left;
  font-size: 200px;
  margin: 50px;
}

p {
  float: right;
  font-size: 20px;
  margin: 100px;
  width; 300px;
}

/* MENU  _________________________ */



.logo {
  float: left;
}

nav {
  width: 100%;
}

/* HEADER */

header {
  float: left;
  width: 100%;
  position: absolute;
  z-index: 9999;
}


/* HEADER LARGE */

header.large {
  height: 50px;
}

header.large .logo {
  width: 225px;
  height: 50px;
  margin: 20px 0 0 20px;
  background: url('../images/logo-fireqa-green-500px.png');
  background-repeat: no-repeat;
  background-size: contain;

  transition: 0.7s all;
  -moz-transition: 0.7s all;
  -webkit-transition: 0.7s all;
  -o-transition: 0.7s all;
}


/* UNORDERED LIST */

header.large ul {
  list-style: none;
  float: right;
  margin-right: 25px;
}
header.small ul {
  list-style: none;
  float: right;
  margin: 0;
}

header.large li {
  display: inline;
  float: left;
  list-style-position: inside;
  height: 50px;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all 0.3s ease-in-out;
}


header.large li a {
  display: block;
  padding: 20px;
  color: #0E6245;
  text-decoration: none;
  font-family: 'Montserrat', 'arial', sans-serif;
  font-weight: 600 !important;
  letter-spacing: -1px;
  font-size: 25px;

  background-image: linear-gradient(#0E6245, #0E6245);
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: 0% 4px;

 ...

JavaScript

function init() {
    let yourWrapperElement = document.getElementsByClassName("outer-wrapper")[0];
    let minScrollDistance = window.innerWidth / 5; //Adjust the scroll sensitivity as you like
    let minScrollDistanceRaw = minScrollDistance / 3;
    let whateverEaseFunctionYouWant = remaningScrollDistance => { return remaningScrollDistance / 15 + 1 };
    let previousScrollDirection = undefined;
    let currentScrollDirection = undefined;
    uss.hrefSetup();
    yourWrapperElement.addEventListener("wheel", event => {
      event.preventDefault();
      event.stopPropagation();
      currentScrollDirection = Math.sign(event.deltaY);
      if(currentScrollDirection !== previousScrollDirection) {
        previousScrollDirection = currentScrollDirection;
        uss.stopScrollingX(yourWrapperElement);
      }
      if(Math.abs(event.deltaY) >= 100)
          uss.scrollXBy(event.deltaY / 100 * minScrollDistance, yourWrapperElement, null, true);
      else
          uss.scrollXBy(event.deltaY * minScrollDistanceRaw, yourWrapperElement, null, true);   
    }, {passive:false});
    uss.setXStepLengthCalculator(whateverEaseFunctionYouWant, yourWrapperElement);
}

// Get an array of elements to watch
let elements = document.querySelectorAll('.section');

// Set an observer to watch their position relative to the viewport boundaries
let observer = new IntersectionObserver(function (entries, self) {
    entries.forEach(entry => {
        // If this item is in the viewport
        if (entry.isIntersecting) {
            // Do some code on that item
            entry.target.classList.add('slideUp');
        } else {
        entry.target.classList.remove('slideUp');
        }
    });
}, { root: null, rootMargin: '0px', threshold: 0 });

// Tell each element to be watched
elements.forEach(el => {
    observer.observe(el);
});