:start: Applies to the first buttons and first track piece of the scrollbar, which are at the top or left side of a vertical or horizontal scrollbar, respectively.It is used to style the increment button or the down arrow for a vertical scrollbar and the right arrow for a horizontal scrollbar :increment: Applies to the arrow button at the end of the scrollbar.It is used to style the decrement button or the up arrow for a vertical scrollbar and the left arrow for a horizontal scrollbar :decrement: Applies to the arrow buttons at the beginning of the scrollbar.:vertical: Used to style the vertical scrollbar differently from the horizontal scrollbar.For example, you can set a different width or color for the horizontal scrollbar :horizontal: Used to style the horizontal scrollbar differently from the vertical scrollbar.Below are some of the most common pseudo-classes: To create a more customized design, you can target specific elements of a scrollbar and apply styles to them by adding a pseudo-class to each pseudo-element. However, for the example above, this wouldn’t be enough unless we make the image responsive by setting its width and height to 100%. In the code above, we’ve displayed both the vertical and horizontal scrollbars, but in most cases, we’d only display one. To do so, we can modify the overflow property, which is responsible for the visibility of the scrollbar, to either overflow-x or overflow-y, depending on which axis we will display the scrollbar. Webkit scrollbar style by Taminoturoko Briggs ( CodePen. The CodePen below shows an example of a styled scrollbar using the pseudo-elements above: Each of these targets different parts of the scrollbar, as listed above. Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, and more. Styling scrollbars in Chrome, Edge, and Safari ![]() Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present.Scrollbar borders: The lines that surround the scrollbar element.Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content.It represents the entire length of the content Track: The area of the scrollbar that the thumb moves along.It can be clicked and dragged to scroll the content up or down Thumb: The movable part of the scrollbar that represents the current position of the content.Below are the elements that make up a scrollbar: Knowing this is helpful when styling it with CSS because you can use different properties to target specific parts of the scrollbar. To do so, you’ll need to write two sets of CSS rules to cover Webkit browsers, like Chrome, Edge, Safari, and Firefox.īefore diving into the code, let’s make sure we understand the structure of a scrollbar. Fortunately, you can easily customize the scrollbar using CSS. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. While it may seem like a small detail, it plays an essential role in website navigation. The scrollbar is a frequently overlooked element in web design. Styling scrollbars for more cross-browser support. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |