JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>

CSS

.myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}

JavaScript

var scheduledAnimationFrame;

function readAndUpdatePage(){
  console.log('read and update');
  scheduledAnimationFrame = false;
}

function onScroll (evt) {

  // Store the scroll value for laterz.
  lastScrollY = window.scrollY;

  // Prevent multiple rAF callbacks.
  if (scheduledAnimationFrame){
    return;
  }

  scheduledAnimationFrame = true;
  requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);