JSFiddle - React, Tailwind, and code Playground

by Larsen

HTML

<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<div id="div"></div>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS

body{
  margin: 0;
}
#div{
  background: #111;
  width: 100%;
  max-height: 300px;
  height: 300px;
  min-height: 0;
  position: fixed;
}

JavaScript

$(document).ready(function() {
var log = 300;
  $(window).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
    delta = parseInt(event.originalEvent.wheelDelta || -event.originalEvent.detail);
    if (delta >= 0) {
    	log +=20;
      $('div').css({
      	height: log+'px'
      });
    } else {
    	log -=20;
      $('div').css({
      	height: log+'px'
      });
    }
  });
})