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, we’ll look at how to make scrollbar visible in mobile browsers with CSS.

How to make scrollbar visible in mobile browsers with CSS?

To make scrollbar visible in mobile browsers with CSS, we set the scrollbar’s width.

For instance, we 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

To make scrollbar visible in mobile browsers with CSS, we set the scrollbar’s width.