smooth scroll script

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
<div class="wrap" id="js-scroll">
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
  <div class="inner">🍣</div>
</div>

SCSS

body {
  overflow: hidden;
}

.inner {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25vh;
  background-image: linear-gradient(60deg, blue, #e1f5c4);
}

JavaScript

const returnMax = Math.max;
  const mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';

  document.getElementById('js-scroll').addEventListener(mousewheelevent, (e) => {

    e.preventDefault();

  });

  let target = document.getElementById('js-scroll'),
      targetH = target.getBoundingClientRect().height,
      scrollAmount = 0;

  document.getElementById('js-scroll').addEventListener(mousewheelevent, (e) => {

    targetH = target.getBoundingClientRect().height;
    scrollAmount += e.deltaY * -1;
    scrollAmount = returnMax(-1 * (targetH - window.innerHeight), scrollAmount);
    scrollAmount = Math.min(0, scrollAmount);

  });

  let y = 0;

  const scrollContent = () => {

    requestAnimationFrame(scrollContent);

    scrollAmount = returnMax(-1 * (targetH - window.innerHeight), scrollAmount);
    y += (scrollAmount - y) * 0.08, -0.1 < y && (y = 0);

    let transform = 'translateY(' + y + 'px) translateZ(0)',
        style = target.style;

    style.transform = transform;
    style.webkitTransform = transform;
    style.mozTransform = transform;
    style.msTransform = transform;

  };
  scrollContent();