Menu
I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with styling the scrollbar for google chrome browser.
694
Left-click and drag the small circle on the Scrollbar thumb color palette to select a color there. You can also choose different shades for your selected color by dragging the HSV bar sliders up and down. Drag the circle within the Scrollbar track color palette to choose a color for the track bar.
We use pseudo-element (i.e., ::-webkit-scrollbar-thumb ) with -webkit prefix and set scrollbar-thumb background- color . We use box-shadow on scrollbar-track to make it stylish and add contrast between the scrollbar and scrollbar-track.
2] Restore Settings to fix the Missing Scroll bar on ChromeIn the top-right corner of the screen, click on the 3 dots (Customize and Control Google Chrome). Choose the Settings option from the list. On the left pane, locate the Advanced option and then expand it. Scroll down click on Reset and Cleanup.
The scrollbar width First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones. With that set, we can style the scrollbar itself.
Just add these CSS rules:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner::-webkit-resizerHere's what each rule does:
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With