JSFiddle - React, Tailwind, and code Playground
HTML
<div id="target">
<p>text</p>
<p>text</p>
<p>text</p><p>text</p>
<p>text</p>
<p>text</p>
<p>text</p><p>text</p>
<p>trethreehext</p><p>text</p>
<p>text</p>
<p>text</p><p>text</p>
<p>text</p>
<p>text</p>
<p>text</p><p>text</p>
<p>text</p><p>text</p>
<p>text</p>
<p>text</p><p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<div id="tabbed">
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p><p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p><p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p><p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p><p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
<p>Tabbed</p>
</div>
...
CSS
#tabbed{
height: 150px;
overflow: scroll;
background-color:#ffffff;
}
#tabbed:hover{
background-color: transparent;
}
JavaScript
$(document).ready(function(){
console.log("check");
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
if($("#tabbed").css('background-color') == 'transparent') {
//disable_scroll();
// $('#tabbed').focus();
}
});
});