JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div id="id">
  <div class="class">
    Scroll mousewheel up or down
  </div>
</div>
<textarea id="text">
  
</textarea>

CSS

#id {
  margin: 0 auto;
  width: 100px;
  height: auto;
  padding: 30px;
  border: 1px solid black;
}
.class {
  width: 75px;
  height: 75px;
  padding: 10px;
  font-size: 11px;
  background-color: rgba(150,150,150, 0.5);
  border: 1px solid #333;
  transition: 0.33s;
}
.class:hover {
   background-color: rgba(150,150,150, 0);
   cursor: row-resize;
}
#text {
  margin: 2px auto;
  padding: 5px;
  width: 100%;
  height: 200px;
  
}

JavaScript

(function(){

	const $ = function(selector){
    return document.querySelector(selector);
	}
  function callback(){
  	var x = $('#text').childNodes[0].data += "I scrolled!";
    debugger
  }
	$('.class').addEventListener("wheel", callback, false);
  
})();