How to make scrollbar visible in mobile browsers with CSS?

Sometimes, we want to make scrollbar visible in mobile browsers with CSS.

In this article, how to make scrollbar visible in mobile browsers with CSS, we’ll look at.

How to make scrollbar visible in mobile browsers with CSS?

With the help of CSS, we set the scrollbar’s width, to make scrollbar in mobile browsers.
For instance, we can write

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

to set the vertical width of the scrollbar with

::-webkit-scrollbar:vertical {
  width: 12px;
}

We set the horizontal width of the scrollbar with

::-webkit-scrollbar:horizontal {
  height: 12px;
}

Then we set the background color and border radius of the handle with

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

Conclusion

With the help of CSS, we set the scrollbar’s width, to make scrollbar visible in mobile browsers.

Leave a Reply