如何在滚动后隐藏滚动条并使其在滚动时再次可见？

Question

我的意图是在滚动后隐藏我的滚动条（即通过向右滑动隐藏）（比方说，在我完成滚动后 2 或 3 秒）

并在我开始滚动时立即使其再次可见（即从右侧滑入可见）

查看代码片段：

div::-webkit-scrollbar {
  width: 8px;
  /* helps remove scrollbar which resizes or shifts list items */
  /* display: none; */
}

div::-webkit-scrollbar-track {
  background-color: #444444;
}

div::-webkit-scrollbar-button:vertical:increment {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-button:vertical:decrement {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-thumb {
  background-color: rgba(108, 92, 231, 0.7);
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(108, 92, 231, 1);
}

div {
  width: 500px;
  height: 300px;
  background-color: #ececec;
  overflow: auto;
}

<div>
  <p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>

请大家帮助我（我会很感激！）

:D

Answer 1

我在考虑如果用户没有任何用于滚动的鼠标滚轮并且如果用户使用实际使用的滚动条滚动怎么办。不管怎样，请在 google 搜索 slim fading scroll bar example。细长的卷轴你会发现一些例子，也许它不是看不见的，但它是透明的，形状很好。

Answer 2

因为CSS没有超时和超时清除 - 使用JavaScript

使用Element.classList添加和删除class
使用 setTimeout() 设置为 2500 毫秒，但每次触发滚动事件时使用 clearTimeout 删除之前的挂起超时。从逻辑上讲，在您完成滚动后，设置的最后一个超时将在 2.5 秒后最终触发 class 删除。
使用像 .is-scrolling 这样的 CSS class 来定义所需的滚动条样式（否则默认情况下是透明的）

const showScrollbars = (evt) => {

  const el = evt.currentTarget;
  clearTimeout(el._scrolling); // Cancel pending class removal
  
  el.classList.add("is-scrolling"); // Add class 
  
  el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
    el.classList.remove("is-scrolling");
  }, 2500);
};

document.querySelectorAll("[data-scrollbars]").forEach(el => {
  el.addEventListener("scroll", showScrollbars); 
});

[data-scrollbars] {
  width: 500px;
  height: 180px;
  background-color: #ececec;
  overflow: auto;
}

[data-scrollbars]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-scrollbars]::-webkit-scrollbar-track {
  background-color: transparent;
}

[data-scrollbars]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
}

[data-scrollbars].is-scrolling::-webkit-scrollbar-track {
  background-color: #777;
}

[data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
  background-color: gold;
}

<div data-scrollbars>
  <p style="height: 300vh;">
    Just some tall paragraph to force DIV scrollbars...<br>
    Scroll me! (<<< PS: See the problem?!)
  </p>
</div>

我强烈建议您不要隐藏滚动条。滚动条是对用户的视觉提示，表明实际上有内容需要滚动。做一个简单的 A/B 测试。对于一半的访问者显示滚动条。对于另一半，做一些时髦的事情——如果您对应用程序（或元素）的 below-the-fold 部分的点击 trough-rate 与第二组进行了 fewer-to-none 互动，请不要感到惊讶用户数。

如何在滚动后隐藏滚动条并使其在滚动时再次可见？

How do I hide a scrollbar after scrolling and make it visible again on scroll?

html

javascript

css

scroll

scrollbar