即使用户没有滚动内容，有没有办法让滚动条变得可见答案

【问题标题】：Is there way to make the scrollbar become visible even when user is not scrolling the content即使用户没有滚动内容，有没有办法让滚动条变得可见
【发布时间】：2021-12-28 15:20:18
【问题描述】：

我想让滚动条在用户不滚动内容时也可见。

代码如下：

div{
   width:200px;
   height:200px;
   overflow:scroll;
}
div::-webkit-scrollbar{
 visibility: visible;
}

&lt;div&gt;Wikipedia is an online free-content encyclopedia project helping create a world in which everyone can freely share in the sum of all knowledge. It is supported by the Wikimedia Foundation and is based on a model of freely editable content. The name "Wikipedia" is a blending of the words wiki (a technology for creating collaborative websites, from the Hawaiian word wiki, meaning "quick") and encyclopedia. Wikipedia's articles provide links designed to guide the user to related pages with additional information.&lt;/div&gt;

我尝试设置visibility: visible; 以使滚动条在我滚动时仍然可见，但似乎不起作用。

有什么方法可以做到吗？

如果没有，我可以通过自定义滚动条使其可见吗？

【问题讨论】：

嗨，实现这一目标的最简单方法是将您的 overflow: scroll 属性封装在父 div 上。
@Blazorman ^ 不会使滚动条始终可见。这就是他已经拥有的。

标签： html css scrollbar

【解决方案1】：

通常，如果此页面的正文中已包含可滚动内容，您只需设置html, body { overflow-y: scroll;}，它就会显示。但是，这不适用于页面上包含没有其他内容的 div。

在这种情况下，我会为 div 设置个性化滚动条的样式，以便它始终可见。这些样式适用于标准滚动条，但您可以根据需要对其进行自定义。

div {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

div::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

div::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

<div>Wikipedia is an online free content encyclopedia project helping create a world in which everyone can freely share in the sum of all knowledge. It is supported by the Wikimedia Foundation and based on a model of freely editable content. The name "Wikipedia"
  is a blending of the words wiki (a technology for creating collaborative websites, from the Hawaiian word wiki, meaning "quick") and encyclopedia. Wikipedia's articles provide links designed to guide the user to related pages with additional information.</div>

【讨论】：