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

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 设置一个个性化的滚动条，使其始终可见。 这些 styles 用于标准滚动条，但您可以根据需要对其进行自定义。

 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>