<div id="customScroll">
  <div class="parent-block">
    <div class="block">
      <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 class="hidden-scroll" :class="{ 'scroll-hidden': scrollNow}"></div>
  </div>
</div>
.parent-block {
  width: 60%;
  position: relative;
}
.block {
  width: calc(100% - 18px);
  max-height: 400px;
  outline: 1px solid;
  padding: 10px;
  overflow: auto;
  position: relative;
  p {
    line-height: 40px;
  }
}
.hidden-scroll {
  position: absolute;
  right: 0px;
  top: 0;
  width: 17px;
  height: 100%;
  background: #ffffff;
  &:not(.scroll-hidden) {
    opacity: 1;
    transition: opacity 2s;
  }
  &.scroll-hidden {
    opacity: 0;
    pointer-events: none;
  }
}
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