How to make the scrollbar visible in mobile browsers with CSS?

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

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

To make the 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 the scrollbar visible in mobile browsers with CSS, we set the scrollbar’s width.