JSFiddle - React, Tailwind, and code Playground

by Toukakoukan

HTML

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

CSS

body { }
#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

$('#fixed').bind('mousewheel', function(e){
         var scrollTo= (e.wheelDelta*-1) + $('#container').scrollTop();
        $("#container").scrollTop(scrollTo);
    });