JSFiddle - React, Tailwind, and code Playground
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nisl eget est pulvinar adipiscing. Mauris et lectus et ipsum volutpat tempor a sed risus. Sed eros ipsum, feugiat vel posuere ac, sodales eget neque. Vestibulum a purus tortor, vitae consequat sapien. Nullam magna massa, dapibus vel aliquam semper, molestie sit amet tellus. Curabitur pellentesque, arcu at condimentum dignissim, erat mi eleifend leo, quis hendrerit dolor leo a arcu. Phasellus nulla mi, faucibus non auctor eget, mollis non lorem. Sed eu ligula eros, et vestibulum elit. Cras nisl purus, tristique eu suscipit et, luctus eget dui. Mauris vulputate, ante quis sodales vehicula, sapien magna elementum velit, vel sollicitudin erat nulla eu odio. Maecenas at metus tellus, in feugiat augue. Morbi nisi risus, bibendum quis egestas vitae, faucibus vel arcu. In hac habitasse platea dictumst.
Aliquam at velit turpis. Maecenas vel lobortis elit. Aenean euismod odio eget eros ullamcorper et elementum justo accumsan. Aliquam dapibus, est ut malesuada lacinia, ipsum sapien dignissim nibh, eget lobortis enim erat eget dolor. Nulla ligula dolor, euismod sed dictum consectetur, pulvinar eget risus. Sed quam metus, ornare ut faucibus nec, ultrices ac odio. Vestibulum ante dui, sollicitudin eget euismod a, vehicula ac augue. Fusce sed tortor ac enim sollicitudin vestibulum ac sit amet dui. Cras vel purus leo. Praesent risus sem, accumsan non vestibulum in, laoreet eu massa.
Aliquam fermentum eleifend nibh non feugiat. Quisque ut odio odio, in gravida felis. Maecenas lacinia dictum lacus ac pellentesque. Nullam ultrices condimentum quam vitae lobortis. Nulla bibendum metus vitae nisi dignissim quis consequat ipsum cursus. Nulla metus nunc, laoreet commodo elementum id, blandit vel erat. Aliquam sit amet tortor justo. Morbi sodales auctor sagittis. Sed fermentum scelerisque suscipit. Praesent scelerisque posuere placerat. Curabitur leo felis, aliquet sit amet ultricies eu, gravida vel...
CSS
body, html, div
{
width:100%;
height:3000px;
overflow:hidden;
}
JavaScript
/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
/*
The following not-working code is from:
http://stackoverflow.com/questions/1326570/how-to-disable-browser-or-element-scrollbar-but-let-scrolling-with-wheel-or-arro*/
$("div").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta * 20));
});