How To Keep Scrollbar Visible Css

by

Scrollbars are essential for navigating long pages or elements with overflowing content. By default, most
browsers only display the scrollbar when the user interacts with the element. However, there might be instances
where you want to keep the scrollbar always visible to improve usability. In this blog post, we will show you
how to achieve this using CSS.

1. Customize the Scrollbar

First, let’s customize the scrollbar so that it’s more visible on the page. We will use the
::-webkit-scrollbar pseudo-element to style the scrollbar. Note that this technique only works
in webkit-based browsers such as Chrome, Safari, and new versions of Microsoft Edge.

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Here’s what the code does:

  • ::-webkit-scrollbar sets the width of the scrollbar.
  • ::-webkit-scrollbar-track styles the track (background) of the scrollbar.
  • ::-webkit-scrollbar-thumb styles the thumb (the draggable part) of the scrollbar.
  • ::-webkit-scrollbar-thumb:hover changes the thumb color when the user hovers over it.

2. Make the Scrollbar Always Visible

To keep the scrollbar always visible, we will set the overflow-y property on the element we
want to have a scrollbar.

.element-with-scrollbar {
    overflow-y: scroll;
}

This will force the scrollbar to be always visible, even if the content does not overflow. However, this could
lead to a disabled scrollbar when the content does not require one. It’s essential to consider the user
experience before applying this solution.

Conclusion

In this blog post, we showed you how to customize a scrollbar and keep it always visible using CSS. Although
this technique only works in webkit-based browsers, it can improve the user experience when used appropriately.
Remember to consider your specific use case and test your solution in different browsers to ensure optimal
results.