JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable-wrapper">
    <div id="non-scrollable">
        <p>You can't scroll in here... until you <button>click here</button></p>
        <p>Now you can scroll in here to your heart's content!</p>
    </div>

    <p>Psst... scroll here...</p>
    <p class="push">Ta-da! You can scroll in here!</p>
</div>

CSS

body {
    background: #333;
    color: #fff;
    font-family: monospace;
}
#scrollable-wrapper {
    height: 700px;
    overflow-y: scroll;
    padding: 20px;
    background: #555;
}
.push {
    margin-top: 500px;
}

#non-scrollable {
    height: 500px;
    padding: 10px;
    overflow-y: scroll;
    background: #777;
    margin-bottom: 25px;
}
#non-scrollable p:first-child {
    margin: 0 0 800px;
}

JavaScript

/**
 * $.disablescroll
 * Author: Josh Harrison - aloofdesign.com
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */(function(e){"use strict";function r(t,n){this.opts=e.extend({handleKeys:!0,scrollEventKeys:[32,33,34,35,36,37,38,39,40]},n);this.$container=t;this.$document=e(document);this.lockToScrollPos=[0,0];this.disable()}var t,n;n=r.prototype;n.disable=function(){var e=this;e.lockToScrollPos=[e.$container.scrollLeft(),e.$container.scrollTop()];e.$container.on("mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",e._handleWheel);e.$container.on("scroll.disablescroll",function(){e._handleScrollbar.call(e)});e.opts.handleKeys&&e.$document.on("keydown.disablescroll",function(t){e._handleKeydown.call(e,t)})};n.undo=function(){var e=this;e.$container.off(".disablescroll");e.opts.handleKeys&&e.$document.off(".disablescroll")};n._handleWheel=function(e){e.preventDefault()};n._handleScrollbar=function(){this.$container.scrollLeft(this.lockToScrollPos[0]);this.$container.scrollTop(this.lockToScrollPos[1])};n._handleKeydown=function(e){for(var t=0;t<this.opts.scrollEventKeys.length;t++)if(e.keyCode===this.opts.scrollEventKeys[t]){e.preventDefault();return}};e.fn.disablescroll=function(e){!t&&(typeof e=="object"||!e)?t=new r(this,e):t&&t[e]&&t[e].call(t)};window.UserScrollDisabler=r})(jQuery);


var $nonScrollable = $("#non-scrollable")

$nonScrollable.disablescroll();

$("button").on("click", function() {
    $nonScrollable.disablescroll("undo");
});