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

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

由于 CSS 没有超时和清除超时 - 使用 JavaScript

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

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 测试。对于一半的访问者显示滚动条。对于另一半，做那些时髦的事情 - 不要惊讶于您的应用程序（或元素）的首屏部分的点击率与第二组用户的互动更少甚至没有.

Answer 2

我正在考虑如果用户没有任何用于滚动的鼠标滚轮以及用户是否使用实际使用的滚动条滚动。 无论如何，请在谷歌搜索苗条的褪色滚动条示例。你会发现一些细长卷轴的例子，它可能不是隐形的，但它是透明的，形状很好。