JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div></div>

CSS

div {
  height: 5000px;
}

JavaScript

isDebug = true;

console.log('foobar');

function initScrollTracker() {
  document.addEventListener("scroll", function () {
    var h = document.documentElement,
      pageURL = window.location.href,
      isDebug = false,
      b = document.body,
      scrollValue = "",
      st = "scrollTop",
      sh = "scrollHeight";

    var percent = parseInt(
      ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100
    );

    // console.log(percent + "%");

    switch (percent) {
      case 25:
        scrollValue = "moreThan25%";
        break;
      case 50:
        scrollValue = "moreThan50%";
        break;
      case 75:
        scrollValue = "moreThan75%";
        break;
      case 90:
        scrollValue = "moreThan90%";
        break;
      default:
        scrollValue = "";
        break;
    }
    if (scrollValue != "") {
        console.log(
          'TEST ga: "send", "event", "Scrolling",  ' +
            scrollValue +
            " , " +
            pageURL
        );
    }
  });
}

initScrollTracker();