JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<body>

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

CSS

body {
  height: 200vh;
  
}

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

JavaScript

$(document).ready(function(){
	$(window).on('scroll touchmove mousewheel', function(e){
  var size = parseInt($("#box").css("font-size"));
  	if (size > 10) {
    	$("#box").css("font-size", "-=2");
    	e.preventDefault();
  		e.stopPropagation();
  		return false;
    }
    else{
    	$("#box").css("font-size", "+=2");
    }
  })
})