2 scroll bary dla jednego diva (jeden na górze, jeden na dole) JQuery, JS

pytanie zadane 11 września 2017 w JavaScript przez raddko Nowicjusz (190 p.)

Cześć próbuję ustawić scrollbary na górze i na dole jednego diva. Po poszukiwaniach na internecie doszedłem do rozwiązania. Problem niestety pojawia się przy przewijaniu paska - wydaję mi się, że przez to, że jeden scrollbar zmienia drugi i vice versa to działanie niezbyt dobrze wygląda (efekt zacinania się)
Ma ktoś jakiś pomysł jak to zrobić, żeby to działało płynnie ?

Wrzucam kod do podpatrzenia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll Bar Top</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <style>
        * {

        }
        body {
            background-color: grey;
        }
        .container, #scrollContainer, .modalWindow {
            margin-left: auto;
            margin-right: auto;
        }
        .container {
            background-color: white;
            width:800px;
            height:400px;
            margin-top:30px;
        }
        #scrollContainer {
            transform: translate3d(0,0,0);
            width:300px;
            overflow-x:scroll;
            overflow-y:hidden;
            height:20px;
        }
        .modalWindow {
            position:relative;
            width:300px;
            height:200px;
            background-color: #B0B0B0;
            overflow-x:scroll;
            overflow-y:hidden;
            display: flex;
            -transition-duration: 2s;


        }
        .item1 {
            background-color:black;
            min-width:150px;
            height:200px;
        }
        .item2 {
            background-color: red;
            min-width:150px;
            height:200px;
        }
        #scrollTop {
             transform: translate3d(0,0,0);
             overflow-x:scroll;
             overflow-y:hidden;
             width:600px;
             height:20px;
         }


    </style>
</head>
<body>
    <div class="container">

        <div id="scrollContainer">
            <div id="scrollTop"></div>
        </div>

        <div class="modalWindow">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item1"></div>
            <div class="item2"></div>
        </div>

    </div>

<script>

    $(function(){
        var top = $("#scrollContainer");
        var bottom =  $(".modalWindow");


            top.scroll(function(){

                bottom.scrollLeft(top.scrollLeft());
                console.log("przsuwam1")

            });

            bottom.scroll(function () {
                console.log("przsuwam2");
                top.scrollLeft(bottom.scrollLeft());
            });

    });

</script>
</body>
</html>