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 i(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.disable()}var t,n=function(e){for(var t=0;t<this.opts.scrollEventKeys.length;t++)if(e.keyCode===this.opts.scrollEventKeys[t]){e.preventDefault();return}},r=function(e){e.preventDefault()};i.prototype={disable:function(){var e=this;e.$container.on("mousewheel.UserScrollDisabler DOMMouseScroll.UserScrollDisabler touchmove.UserScrollDisabler",r);e.opts.handleKeys&&e.$document.on("keydown.UserScrollDisabler",function(t){n.call(e,t)})},undo:function(){var e=this;e.$container.off(".UserScrollDisabler");e.opts.handleKeys&&e.$document.off(".UserScrollDisabler")}};e.fn.disablescroll=function(e){!t&&(typeof e=="object"||!e)?t=new i(this,e):t&&t[e]?t[e].call(t):t&&t.disable.call(t)}})(jQuery);
var $nonScrollable = $("#non-scrollable")
$nonScrollable.disablescroll();
$("button").on("click", function() {
$nonScrollable.disablescroll("undo");
});