不滚动时隐藏滚动条（类似 Mac 的行为）

Question

我在 Mac 浏览器上的 Vue Web 应用程序显示了非常优雅的滚动条。但是 Windows 上的同一个应用程序会因为宽度太大而破坏 UI，并且滚动始终可见。

为了解决这个问题，我从 CSS 中创建了滚动条，并添加了事件监听器以仅在滚动条开始滚动时才显示。

div * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: transparent;
    }
    ::-webkit-scrollbar {
        width: 3px !important;
        background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
}
.on-scrollbar{
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

  }
  
  .on-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: none !important;
    background-color: transparent !important;
  }
  
  .on-scrollbar::-webkit-scrollbar {
    width: 6px !important;
    background-color: transparent;
  }
  
  .on-scrollbar::-webkit-scrollbar-thumb {
    background-color: #acacac;
  }

JS：

window.addEventListener('scroll', (e) => {
    if (e.target.classList.contains("on-scrollbar") === false) {
        e.target.classList.add("on-scrollbar");
    }
}, true);

但问题是，一旦滚动条可见。不滚动时，我无法删除/隐藏滚动条。基本上我正在尝试实现我们在 Mac 上的滚动条的默认行为。 谁能帮我解决这个问题？

Answer 1

希望这会有所帮助。滚动条的一些 debounce 和 css。如果你想改变改变宽度的样式/动画，有更好的资源。祝你好运！

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

window.addEventListener("mousewheel", e => {
  document.querySelector("div").classList.remove("hidden");
});

window.addEventListener("mousewheel", debounce(e => {
  document.querySelector("div").classList.add("hidden");
}));

div {
  background: gray;
  overflow: auto;
  height: 300px;
  width: 100%;
}

div > div {
  background: lighblue;
  height: 800px;
}

/* width */
.shown::-webkit-scrollbar {
  width: 10px;
}

/* width */
.hidden::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightblue;
}

<div class="shown">
  <div></div>
</div>

Answer 2

window.addEventListener('scroll', (e) => {
    if (e.target.classList.contains("on-scrollbar") === false) {
        e.target.classList.add("on-scrollbar");
    }else{
        setTimeout(function(){
          e.target.classList.remove("on-scrollbar");
     },2000)
    }
 }, true);