I would like to show the scrollbar when mouse cursor is on.

I try like this using :hover, but in vain.

Is there any solution?

.myBox{
width:100px;
height:50px;
border:1px solid black;
overflow-y:scroll;
overflow-x:none;
}

.myBox::-webkit-scrollbar{
  display: none;
}
.myBox:hover::-webkit-scrollbar{
  display: block;
}

<div class="myBox">
test<br>
test1<br>
test2<br>
test3<br>
test4<br>
<div>

I would like to show the scrollbar when mouse cursor is on.

I try like this using :hover, but in vain.

Is there any solution?

.myBox{
width:100px;
height:50px;
border:1px solid black;
overflow-y:scroll;
overflow-x:none;
}

.myBox::-webkit-scrollbar{
  display: none;
}
.myBox:hover::-webkit-scrollbar{
  display: block;
}

<div class="myBox">
test<br>
test1<br>
test2<br>
test3<br>
test4<br>
<div>

• html
• css

1 Answer 1

you can try like this

.myBox {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  overflow-y: auto;  /* Changed from scroll to auto */
  overflow-x: hidden; /* Changed from none to hidden */
}

/* Hide scrollbar by default */
.myBox::-webkit-scrollbar {
  width: 8px; /* Set a width instead of display:none */
  background: transparent;
}

.myBox::-webkit-scrollbar-thumb {
  background-color: transparent; /* Make the thumb transparent by default */
}

/* Show scrollbar on hover */
.myBox:hover::-webkit-scrollbar-thumb {
  background-color: #888; /* Show a visible color on hover */
  border-radius: 4px;
}

/* Optional: style the track on hover */
.myBox:hover::-webkit-scrollbar-track {
  background: #f1f1f1;
}

<div class="myBox">
test<br>
test1<br>
test2<br>
test3<br>
test4<br>
<div>