It is usually covered by the other elements::-webkit-scrollbar-button addresses the directional buttons on the scrollbar::-webkit-scrollbar.
#WEBKIT SCROLLBAR BUTTON FULL#
It's better to have these two side-by-side and positioned absolutely, rather than have the thumb as a child of the track, because it prevents any ambiguity about whether you've clicked one or the other. The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:::-webkit-scrollbar addresses the background of the bar itself. The top style of the thumb will be modified with JavaScript. The track and thumb elements are next to each other and will both be positioned absolutely with CSS. We're also including overflow: auto, because we want to make sure that out content is still scrollable even if we can't see the native scrollbars. This is easily accomplished with a bit of CSS. We'll be recreating both of these user interface elements with div elements.īefore we create our custom scrollbars, we'll need to hide the native browser scrollbars to prevent interference.
Scrollbars sometimes also have buttons on the ends that you can click to scroll a set amount in a certain direction, though these aren't seen as often as they used to be. Thumb position on the track tells you how much off-screen content there is in each scroll direction. That is to say, the smaller the thumb, the more content there is outside of the current view. The size of the thumb gives usually gives a hint to how large the content you can currently see is in relation to the total size of the content. 🔗Structure of a ScrollbarĪ scroll bar has two main components: a thumb (this piece you click and drag to scroll) and a track (the space within which the thumb moves). If you want to skip straight to the final functional demo, go here. Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.
#WEBKIT SCROLLBAR BUTTON HOW TO#
This blog post shows you how to do just that using React and TypeScript. Styling Scrollbars in Chrome, Edge, and Safari. If you want to make something extremely customized, you can't rely on the native scrollbars-you have to build your own out of DOM elements. The CSS available to style them is different across browsers, and not very featureful.
0 kommentar(er)
