top of page
How to create custom scroll bars
PROJECTS USED
TAGS
SUITABLE FOR
Editor X, Classic editor
ABOUT
Need to customize your site's scrollbar? Learn how to make it look any way you want on your Wix site.
Layout
01. Add a repeater with a few items
02. Change the repeater to a "scroll" layout
03. Add placeholder content to a repeater item
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Custom code
01. Make sure the site's connected to a domain
02. Add custom code to the site dashboard
03. Make sure the custom code is placed inside “Head”
04. Paste the HTML code
05. Edit the color settings
06. Edit the name of the custom code
<style>
/* width */
section ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
section ::-webkit-scrollbar-track {
background: #000000;
border-radius: 20px;
}
/* Handle */
section ::-webkit-scrollbar-thumb {
background: #000000;
border-radius: 20px; /* roundness of the scroll thumb */
}
/* Handle on hover */
section ::-webkit-scrollbar-thumb:hover {
background: #000000;
}
</style>HAVING TROUBLE?
Contact our VIP support channel at vip@support.wix.com and our team will contact you within 24 hours.
MORE HOW TO'S
bottom of page