CODEWITHSUNDEEP
htmlcss
Shahab Bakhtiari
Shahab Bakhtiari

Reputation: 11

how to put a div as the scrollbar?

hi i have a div and i want to put it as the scrollbar. this is the image of my div

this is what i did

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???

Upvotes: 1

Views: 65

Answers (1)

omidima
omidima

Reputation: 9

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

Upvotes: 1

Related Questions