JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p><p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
    <p>Some content scrollable with the mouse wheel.</p>
</div>

<div id="fixed"><p>cannot scroll, still selectable</p></div>

CSS

#content {
    width: 300px;
    height: 420px;
    overflow: auto;
    border: 2px solid #F00;
}

#fixed {
    width: 90px;
    height: 50px;
    position: fixed;
    top: 10px;
    left: 50px;
    background: #FF9;
    border: 2px solid #990;
}

JavaScript

var fixedElement = document.getElementById("fixed");

    function fixedScrolled(e) {
        var evt = window.event || e;
        var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        $("#content").scrollTop($("#content").scrollTop() - delta);
    }

    var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    if (fixedElement.attachEvent) fixedElement.attachEvent("on" + mousewheelevt, fixedScrolled);
    else if (fixedElement.addEventListener) fixedElement.addEventListener(mousewheelevt, fixedScrolled, false);