Как переместить фиксированный div на сумму прокрутки?

Question

Я видел, как другие использовали overflow-y:scroll, чтобы перемещать div с помощью прокрутки почти как полоса прокрутки, однако моя фиксированная конфигурация css не позволяет этому работать.

У меня просто есть div.

<div class="scrollBar"></div>

.scrollBar {
  width: 2px;
  height: 45px;
  background: white;
  margin-left: 46%;
  overflow-y: scroll;
  position: fixed;
}

Я сейчас пытался анимировать div, перемещаясь вверх или вниз с помощью события прокрутки, используя jquery / Tweenlite, однако это не красноречиво / эффективно.

var multi = event.deltaY >= 0 ? 1 : -1;
var change = (multi * 10).toString + "px";

TweenLite.to($('.scrollBar'), 1, {
  "margin-top": change
});

Как я могу сделать это через css или jquery?

css / html для фрейма, в котором находится полоса прокрутки:

<div class="frame">
<div id="rightCol">
                    <p>[</p>
                    <div class="scrollBar">
                            </div>
                    <p>]</p>

.frame {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-areas:
            "leftCol topBar rightCol"
            "leftCol center rightCol"
            "leftCol bottomCol rightCol";
        grid-template-rows: 10% 80% 10%;
        grid-template-columns: 10% 80% 10%;
        padding: 3.2rem;
         z-index: 10000;
    }