I want to make the scrollbar become visible even when a user is not scrolling the content.
Here is the code:
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>I try to set visibility: visible; to make the scrollbar be still visible when I am scrolling but seems not working.
Are there any ways that I could do that?
If not, could I make it become visible by customing the scrollbar?
>Solution :
Typically, you can just set html, body { overflow-y: scroll;} if this page had scrollable content already in the body, and it would show. However, that will not work with a contained div on the page with no other content.
In this scenario, I would style a personalized scrollbar for the div so that it is always visible. These styles are for a standard scrollbar, but you can customize it as you desire.
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>