Typically, the scrollbar is visible only when scrolling through a page and then disappears immediately after.
I attempted to modify the default scrollbar properties using basic CSS. While this made the scrollbar always visible, adding "overflow-y: auto" did not effectively hide it when not in use.
Could someone adjust the CSS code to resolve this issue?
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* button */
::-webkit-scrollbar-button {
background: #222;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: blue;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* Track */
::-webkit-scrollbar-track {
background: #000;
}
/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
background: #000;
}
/* Corner */
::-webkit-scrollbar-corner {
background: #999;
}
/* Resizer */
::-webkit-resizer {
background: #111;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque eget enim non fringilla. Nullam sit amet lectus a augue bibendum volutpat. Vivamus massa nibh, placerat eu urna vel, auctor vestibulum velit. Vestibulum et purus a nisi accumsan luctus vel et eros. Nam eu dignissim ligula, sit amet volutpat lacus. Vivamus in massa semper, dapibus arcu a, malesuada dui. Praesent tristique rhoncus metus, non consectetur neque congue at. Etiam varius, lectus quis ultrices laoreet, mauris metus vehicula nisi, ut fringilla metus mi at dolor. Nunc nec congue nisi.
Aliquam ornare aliquet consequat. Donec in luctus dui. Nulla est velit, finibus quis interdum in, tristique auctor est. Fusce aliquet ullamcorper nisi eget interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor sapien quis velit rhoncus varius. Integer egestas at neque nec egestas.
Duis semper lacinia mi non facilisis. Suspendisse varius mauris eu risus tempus tempus. Ut nec auctor lacus. Vivamus urna nulla, accumsan a arcu a, commodo dapibus tortor. Ut viverra enim vel arcu eleifend mollis. Sed aliquam egestas neque ac feugiat. Sed porta imperdiet erat, vel mattis nunc malesuada non. Maecenas consectetur metus sit amet est rhoncus, quis aliquet urna blandit. Donec imperdiet pretium nibh, a pellentesque diam volutpat ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nunc risus, porta vel tincidunt nec, gravida at magna. Vestibulum luctus quam id metus pretium blandit. Nulla tellus ligula, venenatis id tellus quis, iaculis elementum enim. Proin sodales orci felis, tempor lobortis turpis lobortis auctor. Nam at rhoncus eros.
Quisque eget urna ac quam dapibus pharetra id id augue. Duis aliquam, lacus nec sagittis ultrices, massa nulla volutpat leo, eu fermentum lorem lectus et nisl. Duis sed finibus odio. Vivamus ullamcorper mauris vel lectus pellentesque, vel interdum odio fermentum. Aliquam quis varius orci. Vestibulum at tempor nulla. Quisque eleifend tortor elit, at pellentesque tortor volutpat vitae. Aenean sed diam non elit eleifend sodales ac quis sem. Cras vel pharetra urna. Nunc et convallis nulla, finibus feugiat ipsum. Etiam mattis nulla neque, eu rutrum metus mollis vel.
Aenean nec metus lorem. Sed non sollicitudin lacus. Donec vitae dui vulputate, venenatis nulla at, posuere quam. In hac habitasse platea dictumst. Nullam interdum arcu risus, sit amet tincidunt dui consequat vitae. Cras at erat vel purus imperdiet ornare. Curabitur ultricies vel metus sed dapibus. Etiam vitae feugiat risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas eu est commodo, luctus sapien hendrerit, dictum sem. Curabitur rhoncus egestas feugiat. Donec auctor scelerisque nibh at efficitur. Pellentesque euismod interdum sodales.
</p>
</body>
</html>