This is how to create a custom scrollbar in Wix Studio
/ Article -
Velo & Code
October 6, 2024
Want to give your or your client’s website a unique touch? This simple scrollbar tweak can instantly elevate your design and create a more personalized feel.

Detailed guide
Access your Wix Dashboard:
Log into your Wix account and navigate to your site dashboard.
Open Settings: Click on Settings in the left menu.
Locate Advanced Settings: Scroll down to Advanced and select Custom Code.
Add Custom Code: Click the Add Custom Code button.
Paste the Code: Insert the provided code into the first textbox.
Apply to All Pages: Ensure the code is set to apply to all pages and is placed in the head section.

<style>
/* To customize the scrollbar */
::-webkit-scrollbar {
width: 12px; /* Standard width for the scrollbar */
}
::-webkit-scrollbar-track {
background: #1B1C1D; /* Dark gray background for the scrollbar track */
}
::-webkit-scrollbar-thumb {
background-color: #C2C2C2; /* Gray color for the scrollbar */
border-radius: 6px; /* Rounded corners for the scrollbar */
}
::-webkit-scrollbar-thumb:hover {
background-color: #FF4D02; /* Orange color on hover to provide visual feedback */
}
/* Reset scrollbar to default appearance when less than 750px */
@media (max-width: 750px) {
::-webkit-scrollbar {
width: auto; /* Standard width for the scrollbar */
}
::-webkit-scrollbar-track {
background: none; /* No background for the scrollbar track */
}
::-webkit-scrollbar-thumb {
background-color: transparent; /* No color for the scrollbar */
}
}
</style>
The code used is the one used on this website. If you want to change it, paste it into Chat GPT and describe what you want.
If you have any further question, you can alway write me a message.
You might also like

How I stay updated on the fast-changing tech world

Typography tips: Choosing the perfect font

How to create a unique and memorable brand

How I earned my Wix Studio Certification

How to design for mobile without sacrificing creativity

What are alt tags and how to optimize them for SEO
Explore my work
Copy & Web Design

Campus Webbyrå
Tools used
Wix Studio
Web Design

Campus Vänner
Tools used
Wix Studio & Photoshop