Aleš Sýkora wrote

Custom SCROLLBAR with Oxygen Builder

7. 12. 2020 in ,

Are you looking for some cool scroollbar, like on CSS-Tricks website?

for a specific DIV use this in your custom CSS:

/* Change div.a-main-content to your selector */
div.a-main-content::-webkit-scrollbar {
    width: 24px;
}
 
/* Scroll Track */
div.a-main-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Scroll Handle */
div.a-main-content::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
	background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div.a-main-content::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

for a whole document use body instead.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Footer at the bottom of page Oxygen Builder
2. 12. 2020 in ,
Push your footer to the bottom in oxygen builder.
Read More
Aleš Sýkora wrote
Change WP Rocket lazyload treshold
21. 1. 2021 in
Default treshold for lazyload is 300px in WP-Rocket. That means that images that are within 300px of the viewport (browser window) are loaded for smooth user experience. If you like to load less images – for example 100px after viewport only – you can not set it up directly in WP Rocket’s settings page. To […]
Read More
Aleš Sýkora wrote
User friendly Multiple Select Field with Toolset Forms & Select2.js
11. 6. 2019 in
Using the standard multiple select field is bad. Bad for UX. Why should I hold down the CTRL when I need select more than one value? Let’s make your multiple select fields user friendly with Select2.js.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram