JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.djrefine.com/wp-content/themes/epic-custom/js/jquery.scrollTo-1.4.2-min.js"></script>
<h1> Hover in safari is not triggered when scrolling with the track pad or scroll wheel unless content is places in a scrolling div using overflow: scroll. </h1>

<div id="outer">
    
     
<a href="#" class="scroll-left"></a> <a href="#" class="scroll-right"></a>
    <div id="makeMeScrollable">
     
        <h1> This div is set to scroll overflow and the hoverstate will trigger wehn scrolling with the scroll wheel or track pad </h1>
        
        <div id="container" class="variable-sizes">
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div class="box">box</div>
            <div...

CSS

.box {
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #12bf44;

    display: inline-block;
}

h1 {
    font-size: 20px;
    padding: 15px;
    margin-top: 30px;
}

.box:hover {
background-color: blue;
}

#container {
 height: 350px;
    max-height: 350px;
}
#makeMeScrollable {
    position: relative;
    float: right;
    margin-top: 40px;
    overflow-x: scroll;
    height: 20px;
    margin-bottom: 50px;
}
#outer {
   height: 350px;

}
.scroll-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 100%;
    background: orange;
    z-index: 50;
}

JavaScript

$('.scroll-left').hover(function() {
    var scrollDistance = $('#makeMeScrollable').scrollTop();
    var scrollSpeed = scrollDistance * 2.5;
    $('#makeMeScrollable').scrollTo('0px', scrollSpeed);
}, function() {
    $('#makeMeScrollable').stop();
    $('#makeMeScrollable').scrollTo('-=20px', 100);
    // stop on unhover
});
$('.scroll-right').hover(function() {
    var scrollDistance = $('#makeMeScrollable').scrollTop();
    var scrollWidth = $('#container').height();
    var windowWidth = $('#makeMeScrollable').height();
    var scrollSpeed = (scrollWidth - scrollDistance - windowWidth) * 2.5;
    $('#makeMeScrollable').scrollTo('100%', 3000);
}, function() {
    $('#makeMeScrollable').stop();
    $('#makeMeScrollable').scrollTo('+=20px', 100);
    // stop on unhover
});