JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class='text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque sed ligula non porttitor. Mauris congue auctor metus, tincidunt ultricies erat suscipit a. Sed ut leo id sem dapibus venenatis et et purus. Vestibulum sit amet ligula vitae quam interdum tincidunt. Ut cursus vehicula massa vitae rutrum. Mauris commodo ornare risus, id tincidunt felis mollis ut. Phasellus porttitor, dolor hendrerit molestie vestibulum, mi ligula congue justo, vitae interdum massa lacus ac felis. Nunc aliquet est at tellus semper dignissim.

Phasellus luctus nisl at massa interdum, eget rhoncus urna vulputate. Sed at ultrices erat, sed euismod lorem. Nulla ullamcorper odio vitae porta consequat. Integer bibendum, sapien vel faucibus pharetra, augue dui semper dolor, ac consectetur quam justo ac dui. Aliquam condimentum, enim eu commodo pretium, ipsum sapien tempor urna, ut imperdiet dolor arcu eu tortor. In interdum diam ligula, in commodo odio elementum vel. Maecenas dapibus lectus id diam varius posuere. Curabitur quam libero, vulputate vitae odio feugiat, hendrerit porttitor massa. Etiam sodales placerat placerat.

Maecenas luctus elit hendrerit commodo elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet eros quis elit faucibus porttitor. Ut erat risus, porttitor eget molestie sed, imperdiet eu nibh. Morbi eget fermentum turpis, at volutpat est. In tristique, massa et adipiscing eleifend, ipsum massa convallis odio, ullamcorper ultrices ligula sem sed leo. Nam tellus arcu, consectetur adipiscing lorem id, scelerisque lobortis ipsum. 
</div>
<div class="wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque sed ligula non porttitor. Mauris congue auctor metus, tincidunt ultricies erat suscipit a. Sed ut leo id sem dapibus venenatis et et purus. Vestibulum sit amet ligula vitae quam interdum tincidunt. Ut cursus vehicula massa vitae rutrum. Mauris commodo ornare risus, id tincidunt felis...

CSS

div.text{height:500px;width:100px;overflow:auto;}
div.wrap {width:100%;overflow:auto;}

JavaScript

/*var b = $('body'),
    wr = $('.wrap');
$('div.text').hover(function(){
   var w = wr.width();
   wr.css('width',w); 
   b.css('overflow','hidden');  
},
                    function(){
   b.css('overflow','auto');
   wr.css('width','');
});*/
$('.text').hover(function() {
$(this).bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type == 'DOMMouseScroll') {
scrollTo = 1000 * e.originalEvent.detail;
}

if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});