鼠標移入顯示滾動條，移出隱藏

css滾動條一般是會佔位的

.container {
  overflow: hidden auto;
  
  &::-webkit-scrollbar {
    width: 0px; /* 控制滾動條整體寬度 */
  }
  
  &:hover {
    &::-webkit-scrollbar {
      width: 6px; /* 控制滾動條整體寬度 */
    }
  }
}

如果我們想要實現鼠標移入滾動條顯示，鼠標移出滾動條隱藏，如果單純設置滾動條寬度為0，會發生容器寬度變化導致閃爍
我們可以通過透明度隱藏滾動條，通過鼠標更換透明度的顯示，如下做：

<template>
  <div 
    :class="['container', mouseInside && 'container-hover']" 
    @mouseenter="onMouseEnter" 
    @mouseleave="onMouseLeave">
      <!-- 省略其它 -->
  </div>
</template>

<script setup lang="ts">

// 是否鼠標移入
const mouseInside = ref<boolean>(false);
const onMouseEnter = () => mouseInside.value = true;
const onMouseLeave = () =>  mouseInside.value = false;
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden auto;

  // 默認隱藏滾動條
  &::-webkit-scrollbar-thumb {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }
}
.container-hover {
  // 鼠標移入，顯示滾動條
  &::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 20%);
    border-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 40%);
  }
}
</style>

防抖式隱藏

基於同樣的原理，我們可以動態切換類名，實現防抖式隱藏，僅在滾動時顯示，n秒後不滾動則隱藏滾動條

<template>
  <div class="container no-scroll" @scroll="onScroll">
     <!-- 省略其它 -->
  </div>
</template>

<script setup lang="ts">
// 滾動事件
const scrollTimeout = ref<any>(null);
const onScroll = (e: any) => {
  let dom = e.target;
  // 滾動條隱藏-防抖式隱藏
  dom.className = "container";
  clearTimeout(scrollTimeout.value);
  scrollTimeout.value = setTimeout(() => {
    dom.className = "container no-scroll";
  }, 1000); // n秒後隱藏滾動條
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px;
  overflow: hidden auto;
}
// 隱藏滾動條
.no-scroll {
  &::-webkit-scrollbar-thumb {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }
}
</style>

container no-scroll初始容器類名，默認滾動條不顯示，一旦發生滾動，則僅使用container類名，此時顯示滾動條，當用户停止滾動n秒後，恢復container no-scroll類名隱藏滾動條