how to put a div as the scrollbar? - html

Question

hi i have a div and i want to put it as the scrollbar. this is the image of my div
i used this style "overflow-y: scroll;" but it's not what i'm looking for
this is my html tag
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: scroll;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
what should I do???

Answer 1

You should change overflow-y: scroll; to overflow-y: auto;. For example:
.mouse {
overflow-y: auto;
}
body {
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.mouse {
width: 100px;
height: 150px;
border: 2px solid white;
border-radius: 50px;
position: relative;
overflow-y: auto;
}
.mouse::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background-color: white;
top: 30px;
left: 50px;
transform: translateX(-50%);
border-radius: 50%;
animation: scroll 1s infinite;
}
#keyframes scroll {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 100px;
}
}
<div class="mouse"></div>
Of course you can delete overflow-y from .mouse