Blog Details

Customize scroll bar can enhance the look of a website using CSS.

<div class="mywindow">
    <p>Lorem Ipsum is simply dummy text of the printin...</p>
</div>

.mywindow {
height: 25vh;
width: 70%;
  border: 1px dashed black;
  margin: auto;
  overflow: hidden;
  overflow-y: scroll;

}

/* width */
.mywindow::-webkit-scrollbar {
  width: 20px;
cursor: pointer;

}

/* Track */
.mywindow::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
.mywindow::-webkit-scrollbar-thumb {
  background-color: #569dcc;
  border-radius: 10px;
   box-shadow: inset 0 0 5px black;
}

/* Handle on hover */
.mywindow::-webkit-scrollbar-thumb:hover {
   background-color: #569dcc;
}

example of customize scroll bar