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

Question

即使用户没有滚动内容，我也想让滚动条可见。

代码如下：

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

<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 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.</div>

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

有什么办法可以做到吗？

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

Answer 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>

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

Is there way to make the scrollbar become visible even when user is not scrolling the content

html

css

scrollbar