<div id="customScroll">
  <div class="block" :class="{ 'scroll-hidden': !scrollNow}">
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
    <p>あいうえお</p>
  </div>
</div>
.block {
  width: 60%;
  max-height: 400px;
  border: 1px solid;
  padding: 10px;
  overflow: auto;
  position: relative;
  &.scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
 .scroll-hiddenp {
   line-height: 40px;
 }
View Compiled
window.onload = function () {
  new Vue({
    el: "#customScroll",
    data: function () {
      return {
        scrollNow: false, // スクロール実行中フラグ
        timer: false,
      };
    },
    mounted: function () {
      document
        .querySelector(".block")
        .addEventListener("scroll", this.handleScroll);
    },
    methods: {
      /**
       * スクロールイベント
       */
      handleScroll: function () {
        this.scrollNow = true; // スクロールバーを表示
        _this = this;

        // 2秒後にスクロールバーを非表示
        if (this.timer != false) clearTimeout(this.timer);
        this.timer = setTimeout(function () {
          _this.scrollNow = false;
        }, 2000);
      },
    },
  });
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js