16-页面滚动条滑动时展示，不滑动时隐藏方案

前提：项目上需要做滚动条滑动时展示，不滑动时隐藏的设计，但是看了一些方案后觉得不太适用，且某些方案若使用则需要修改的地方较多，只能另寻方案

一般情况下，pc端的滚动条如下展示，且会一直展示

而移动端的滚动则如下，但是符合滑动时展示，不滑动时隐藏的设计

若要是自定义滚动条样式，且pc段和移动端效果一致，就需再设计一番（如果没这要求的话，建议还是使用浏览器的默认样式渲染）

本次方案是通过动态设置css变量的方式实现的

方案一：切换滚动条的展示属性

方案二：切换滚动条滚动块的颜色

方案三：切换滚动条滚动块的大小

1、定义动态变量

:root {
  --scrollbarThumb: rgba(0, 0, 0, 0);
  --scrollbarWidth:10px;
  --display: none;
}

2、自定义滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  /* 纵向滚动条的宽度 */
  width:var(--scrollbarWidth);
  /* 横向滚动条的宽度 */
  height: 5px;
  display: var(--display);
}

/* 滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumb);
  border-radius: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

3、监听滚动条滚动事件

<script>
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll(e) {
      //获取
      //   console.log(getComputedStyle(document.documentElement)
      // .getPropertyValue('--scrollbarThumb'));
      //修改
      document.documentElement.style.setProperty("--scrollbarThumb", "#e5e5e5");
      document.documentElement.style.setProperty("--display", "block");
      document.documentElement.style.setProperty("--scrollbarWidth", "10px");
      setTimeout(() => { //定时
        document.documentElement.style.setProperty(
          "--scrollbarThumb",
          "rgba(0,0,0,0)"
        );
        document.documentElement.style.setProperty("--display", "none");
        document.documentElement.style.setProperty("--scrollbarWidth", "0px");
      }, 2000);
    },
  },
};
</script>

选其一即可，在页面中使用，全局使用的话可能会影响其他页面元素进度条的体验，且在移动端情况下出现了滚动至底部时页面抖动的情况，这个问题暂时还没有想到解决方案，如果有知道的伙伴可以一起讨论一下

坚持就是胜利！