JSFiddle - React, Tailwind, and code Playground

by Shantanu Kulkarni

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
   blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
  </div>
</div>

CSS

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px; 
  padding:3px; 
    background:#f00;
}
.Content
{
  height:224px;
   overflow:auto;
    background:#fff;
}

JavaScript

var elem = $('.Content');
var delay = 1000;
var timeout = null;
elem.bind('mousewheel',function(event){
//event.preventDefault();
    clearTimeout(timeout);
    timeout = setTimeout(function(){
    	//event.preventDefault();
      alert('stop');
      
        elem[0].scrollTop += 1;
        //event.stopPropagation();
    },delay);
});

$('.Content').on('mousedown', function(e){
//debugger;
	//if(e.button == 1) {
  	alert('middle button clicked');
  //}
});