Scrollbars Tutorial


• Scrollbars look different on different browsers
• Chrome, Edge & Safari all have the SAME view of a scroll bar & Mozilla Firefox is the exception
• border-radius: 16px = makes it into a circle #funfact
• feel free to change the colors/styles
• if this helped please link back or follow <3 x0o


Mozilla Firefox (Full Site)

• the code provided beneath here would be for your actual site (just have to modify colors to your liking)
• if you notice every scroll text area I have here is pink



Mozilla Firefox (Specific Div)

• you can make your site have a specific scrollbar OR different scrollbars by creating a div.
• you can only see these examples on Mozilla Firefox or else they will all look like they are pink.


Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar



Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar
Example of scrollbar





Chrome, Edge & Safari (Full Site)

• the code provided beneath here would be for your actual site (just have to modify colors to your liking)





Chrome, Edge & Safari (Specific Div)

• you can make your site have a specific scrollbar OR different scrollbars by creating a div.
• you can only see these examples on Chrome, Edge & Safari or else they will all look like they are pink.


Another Example
Another Example
Another Example
Another Example
Another Example
Another Example
Another Example