JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

<div class="scrollable">
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
    line<br/>
</div>

CSS

body
{
    height: 4000px;
}

.scrollable
{
    margin: 500px auto;
    overflow-y: scroll;
    width: 50%;
    height: 200px;
}

.scrollable.noScroll
{
    overflow: hidden;
}
}

JavaScript

jQuery(function($){
    var windowIsScrolling = false;
    var windowScrollTimeout;
    
    $(window).on('scroll', function(e){
        console.log(e.target);
        if(!$(e.target).is('.scrollable') && !windowIsScrolling){
            clearTimeout(windowScrollTimeout);
            windowIsScrolling = true;
            windowScrollTimeout = setTimeout(function(){
                windowIsScrolling = false;
            }, 500);
        }
    });
    
    $('.scrollable').on('mousemove DOMMouseScroll mousewheel', function(e){
        if(windowIsScrolling){
            $(this).addClass('noScroll');
        }
        else
        {
            $(this).removeClass('noScroll');
        }
    });
    
});