JSFiddle - React, Tailwind, and code Playground

by codesam

HTML

<body>
  <div id="box">
    Text
  </div>
  <p id="direction">
  </p>
</body>

CSS

body {
  height: 200vh;
}

#box {
  width: 100%;
  height: 50vh;
  background-color: black;
  color: white;
  font-size: 72px;
}

JavaScript

$(document).ready(function(){
	var initialScroll = -1;
	var size;
	$(window).on('scroll touchmove mousewheel', function(e){
  	var currentScroll = $(window).scrollTop();
  	if (currentScroll > initialScroll) {
  		$("#direction").text("down");
			size = parseInt($("#box").css("font-size"));
      if (size > 10) {
       	$("#box").css("font-size", "-=2");
       	e.preventDefault();
       	e.stopPropagation();
        return false;
      }
  	}
  else if (currentScroll < initialScroll) {
  	$("#direction").text("up");
  }
  else if (currentScroll == 0 && initialScroll == 0) {
    size = parseInt($("#box").css("font-size"));
    if (size < 72) {
    	$("#box").css("font-size", "+=2");
      e.preventDefault();
      e.stopPropagation();
      return false;
  	}
  }
  initialScroll = currentScroll;
  });
});