How to Always Display the Vertical Scrollbar in WebKit Browsers?

Always Displaying Vertical Scroll Bar

In certain web designs, it's crucial to ensure users can easily identify scrollable content in a div element. Despite setting overflow-y: scroll, the vertical scroll bar may not be visible when not actively being used on certain operating systems, such as macOS.

Solution:

To force the vertical scroll bar to always display, use the following CSS properties:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

These styles apply to the WebKit-based browsers, such as Safari and Chrome on macOS. By customizing the appearance of the scrollbar, you can make it more prominent and indicate the presence of scrollable content even when it's not in active use.

The above is the detailed content of How to Always Display the Vertical Scrollbar in WebKit Browsers?. For more information, please follow other related articles on the PHP Chinese website!