Как сделать условие, чтобы проверить, если моя полоса прокрутки в нужный интервал, и как улучшить производительность вычислений движения полосы прокрутки &

Question

В настоящее время я создаю простое приложение Vue.js, которое представляет собой макет таблицы.Мне нужно сделать собственную полосу прокрутки, и я понял, как это сделать, но я ищу условие, чтобы проверить, соответствует ли полоса полосы прокрутки и как улучшить производительность вычислений и алгоритма.

Я пыталсяпроверьте нижнее пространство через wrap.getBoundingClientRect (). bottom и то же самое для top, но получилось довольно странно и глючно.

<template>
  <div id="app">
    TEST APPLICATION FOR COINCAP 

    <div id="wrap" class="wrap">
      <div class="container"  v-on:mouseleave="unsetOver">
        <table class="table-o">
          <tr class="table-o__head">
            <th class="table-o__head_rank center-align">Rank</th>
            <th class="left-align">Name</th>
            <th class="right-align">Price</th>
            <th class="table-o__head_cap right-align">Market Cap</th>
            <th class="table-o__head_vol right-align">Volume</th>
            <th class="table-0__head_change right-align">Change</th>
          </tr>
          <tr v-for="(item, index) in items">
            <td class="table-o__id center-align">
              {{ index+1 }}
            </td>
            <td class="table-o__name left-align">
              {{ item.name }}
            </td>
            <td class="table-o__price right-align">
              {{ '$' + parseNumber(item.priceUsd) }}
            </td>
            <td class="table-o__cap right-align">
              {{ '$' + roundToLlion(item.marketCapUsd) }}
            </td>
            <td class="table-o__vol right-align">
              {{ '$' + roundToLlion(item.volumeUsd24Hr) }}
            </td>
            <td class="table-o__change right-align">
              {{ roundPercents(item.changePercent24Hr) + '%' }}
            </td>
          </tr>
        </table>
      </div>
      <div class="scrollbar">
        <div class="scrollbar-wrap">
          <div id="runner" class="scrollbar__rider"></div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  name: 'app',
  data () {
    return {
      xhrUri: 'https://api.coincap.io/v2/assets?limit=15', // URI REST запроса
      xhrResult: '',
      items: [],
      isOver: false,
      isClicked: false,
      mouseY: 0,
      mouseStartY: 0,
      runnerScroll: 0,
      wrapBot: 0
    }
  },
  created() {
    this.xhrRequest();    
  },
  mounted() {
    runner.addEventListener('mousedown', this.setClicked);
    runner.addEventListener('mouseup', this.unsetClicked);
    runner.addEventListener('mousemove', (e) => {
      let   event       = e || window.event;

      if (!this.isClicked) return;
      e.preventDefault();
      const y  = e.pageY - wrap.offsetTop;
      const walk = y - this.mouseStartY;

      runner.style.top = (this.runnerScroll + walk) + 'px';
      });
  },
  methods:
    setClicked(e) {
      // const bot = parseInt(wrap.getBoundingClientRect().bottom) + 'px';
      this.isClicked    = true;
      this.mouseStartY  = e.pageY - wrap.offsetTop;
      this.runnerScroll = runner.offsetTop;
    },
    unsetClicked() {
      this.isClicked = false;
      // console.log('not clicked');
    },
    unsetOver() {
      this.isClicked = false;
      // console.log('not over');
    }
  }
}
</script>