JSFiddle - React, Tailwind, and code Playground

by Shan Jay

HTML

<div id="container" style="width:100%;height:100%;">
<table id="table">
    <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
        <td>faaaaaaaafdsfsdf
        </td>
    </tr>
        <tr>
  ...

JavaScript

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

$(document).ready( function(){
$('#table td').on('mousedown', function(){
	
    	disableScroll();
    
});

$('#table td').on('mouseup', function(){
	
    enableScroll();
    
});
});