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>
<div id="container2">
   
    <div id="content2">Tall Content</div>
    
</div>

CSS

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

JavaScript

$('#fixed').bind('mousewheel', function(e){
        
      // We need to find out what elements are behind #fixed, so locate elements whose coordinates cover the same area
      var potentialScrollElements = findIntersectors($('#fixed'),$('*:not(#fixed,body,html)'));
      $.each(potentialScrollElements ,function(index,Element){
          // Of these elements that cover the same area, which of them have scrollbars?
          var hasVerticalScrollbar= $(Element)[0].scrollHeight>$(Element)[0].clientHeight;
          if(hasVerticalScrollbar){
              // Ahah! This one has a scrollbar, let us scroll it.
              var scrollTo= (e.wheelDelta*-1) + $(Element).scrollTop();
             $(Element).scrollTop(scrollTo);
          }
      });
    });


function findIntersectors(targetSelector, intersectorsSelector) {
    var intersectors = [];

    var $target = $(targetSelector);
    var tAxis = $target.offset();
    var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
    var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];

    $(intersectorsSelector).each(function() {
          var $this = $(this);
          var thisPos = $this.offset();
          var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
          var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];

          if ( t_x[0] < i_x[1] && t_x[1] > i_x[0] &&
               t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
              intersectors.push($this);
          }

    });
    return intersectors;
}