JSFiddle - React, Tailwind, and code Playground

HTML

<div class="before">
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
</div>
<div class="content">
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
</div>
<div class="after">
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>0</p>
</div>

CSS

.before { background-color: #fcc; height: 400px; overflow: hidden; }
.content { height: 300px; overflow: auto; }
.after { background-color: #cfc; height: 600px; overflow: hidden; }

JavaScript

jQuery(function ($) {
    var allowDocumentScroll = true;
    var timer = 0;

    function enableDocumentScrollAfterPause() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            allowDocumentScroll = true;
        }, 300);
    }

    $('.content').on('mousewheel DOMMouseScroll', function (event) {
        var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail; // - up, + down
        var element = $(this);
        var maxScroll = element.prop('scrollHeight') - element.height();

        if ((delta < 0 && $(this).scrollTop() > 0) || (delta > 0 && $(this).scrollTop() < maxScroll)) {
            allowDocumentScroll = false;
            enableDocumentScrollAfterPause();
            return;
        }

        if (!allowDocumentScroll) {
            event.preventDefault();
            enableDocumentScrollAfterPause();
        }
    });
});