JSFiddle - React, Tailwind, and code Playground

by NIXin

HTML

<div id="fixed">mouse wheel over this fixed content</div>
<div id="container">
    <div id="content">Tall Content</div>
</div>

CSS

body {
    overflow: hidden;
}
#container {
    height: 500px;
    border: 1px solid blue;
    overflow: scroll;
}
#content {
    height: 1000px;
}
#fixed {
    position: fixed;
    right: 0px;
    height: 100px;
    width: 200px;
    border: 1px solid red;
    background: pink;
}

JavaScript

var target = $('#container').get(0);
$('#fixed').on('wheel', function (e) {
    var newEvent = new WheelEvent(e.originalEvent.type, e.originalEvent);
    target.dispatchEvent(newEvent);
});