Scrollbars on Hover

The design of web scroll bars should take into account both user experience and accessibility. Generally speaking, if an area needs to be scrolled, the scroll bar should be displayed. However, the online world is ever-changing, and some clever techniques can enhance the user experience. This article will introduce a method to make the scrollbar hidden by default and only show when the mouse is hovered.

This method was proposed by Thomas Gladdines and in my tests it worked fine on Chrome, Firefox and Safari browsers, not affected by macOS system settings, and has good compatibility.

The core principle is to use a mask layer to cover the scroll bar. By creating a mask layer that is exactly the same width as the scrollbar (assuming the width is 17px here, the actual width may need to be calculated by script), and setting enough height, the scrollbar can be hidden perfectly. It can even transition animation of the positioning of the mask layer to simulate the effect of gradually emerging, which is very clever.

It is worth noting that this refers to the element's native scrollbar, not the fake scrollbar. Forging scrollbars is also a feasible solution. Ben Nadel once introduced how Slack is implemented. Slack's method is to force render the scrollbar to an area hidden by overflow property, and then create a virtual scrollbar to simulate the native scrollbar, thus gaining more control over the scrollbar. This is a different approach than forcing the scrollbar to render. Additionally, this approach does not prevent you from styling the scrollbar, which may have some benefits, such as specifying the width of the scrollbar exactly.

1. As of this writing, macOS's instructions are: "If your device supports gesture action, the scroll bars will be hidden before you start scrolling. Otherwise, they will be visible."

The above is the detailed content of Scrollbars on Hover. For more information, please follow other related articles on the PHP Chinese website!