JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae elit lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec venenatis condimentum elementum. Fusce id malesuada nunc. Donec erat odio, laoreet quis lobortis eget, ultrices nec diam. Nam eget arcu sed libero vehicula elementum. Sed vehicula pellentesque ligula, ut egestas metus egestas ut. Aenean malesuada lobortis molestie. Fusce fringilla neque et neque tempus tempus. Maecenas porttitor libero sit amet enim sollicitudin accumsan sit amet commodo odio. Vestibulum odio risus, pulvinar vitae varius eget, laoreet vel augue. Aenean tortor elit, accumsan nec porttitor ut, fermentum eget ante. Pellentesque quis nulla a dui adipiscing congue sit amet et tortor. Nullam consequat, libero nec tincidunt blandit, tellus metus adipiscing velit, sed pharetra massa nisl nec leo. Suspendisse potenti.
</p>
<div id="block">
Aenean sodales neque semper nisi blandit eu scelerisque metus ornare. Quisque ullamcorper augue pretium velit elementum condimentum. Aliquam erat massa, commodo sit amet accumsan at, elementum eu velit. Etiam pellentesque magna ac massa imperdiet ac semper sapien aliquet. Duis et ligula a orci ornare faucibus. Fusce eu quam a lorem ornare faucibus sit amet at orci. Integer vulputate euismod nisi non aliquet. Pellentesque non sem a ipsum bibendum imperdiet. Sed ut quam vel velit iaculis scelerisque non vitae sapien. Nullam quam enim, sodales eget aliquet in, tempor et justo. Cras nec ipsum lacus, nec venenatis lacus. Cras sit amet nibh urna, sed aliquet lectus. Quisque hendrerit egestas sem nec feugiat. Etiam scelerisque sagittis dolor in accumsan.
Pellentesque eget dignissim odio. Curabitur vitae pharetra metus. Curabitur lectus ante, rhoncus ac rhoncus id, hendrerit in urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sit amet odio eget nibh vestibulum aliquet. Nullam facilisis, sapien...

CSS

body {
    overflow-y: scroll;
    font-family: Georgia;
}
#block {
    border: 5px solid #ccc;
    margin: 50px auto;
    width: 70%;
    height: 300px;
    overflow-y: scroll;
}

JavaScript

$(document).on('mouseover', '#block', function() {
    (function(id){$(document).on('mousewheel', function(e){
        if (e.target.id !== id) {
            e.preventDefault();
        }
    });})(this.id);
}).on('mouseout', '#block', function() {
    $(document).off('mousewheel');
});