How to Create a Custom Scrollbar Using CSS & JavaScript

 A scrollbar might seem like a small detail, but customizing it can add a unique touch to your website’s design. While most sites stick with default browser scrollbars, a personalized version can align better with your brand or improve user experience. Let’s walk through how to build one using CSS and JavaScript—no fancy tools required!

Why Customize Scrollbars?

Default scrollbars work fine, but they don’t always match a site’s style. Custom scrollbars let you:

  • Match your site’s color scheme.

  • Adjust thickness for better visibility.

  • Add smooth animations or hover effects.

Plus, it’s a fun way to surprise visitors with subtle creativity.

Step 1: Styling the Scrollbar with CSS

CSS handles the visual part of the scrollbar. Here’s how to style it:

For WebKit Browsers (Chrome, Safari, Edge)

Browsers like Chrome use WebKit, which supports special CSS pseudo-elements for scrollbars:

css

Copy

/* The entire scrollbar area */  

::-webkit-scrollbar {  

  width: 12px; /* Adjust thickness */  

}  


/* The draggable part */  

::-webkit-scrollbar-thumb {  

  background: #4CAF50; /* Color of the scrollbar */  

  border-radius: 8px; /* Rounded edges */  

}  


/* The track (background) */  

::-webkit-scrollbar-track {  

  background: #f1f1f1; /* Track color */  

}  


/* Hover effects */  

::-webkit-scrollbar-thumb:hover {  

  background: #45a049;  

}  

For Firefox

Firefox uses simpler CSS properties:

css

Copy

html {  

  scrollbar-width: thin; /* "auto" or "thin" */  

  scrollbar-color: #4CAF50 #f1f1f1; /* thumb and track colors */  

}  

Note: Firefox doesn’t support rounded corners or hover effects yet, so keep designs simple for cross-browser consistency.

Step 2: Adding Interactivity with JavaScript

JavaScript lets you add dynamic behavior, like changing the scrollbar on click or animating it. Here are two examples:

Example 1: Changing Scrollbar Color on Click

Let users toggle between light/dark modes:

html

Copy

<button onclick="toggleTheme()">Toggle Theme</button>  

Run HTML

javascript

Copy

function toggleTheme() {  

  const body = document.body;  

  body.classList.toggle('dark-mode');  


  // Update scrollbar colors  

  if (body.classList.contains('dark-mode')) {  

    document.documentElement.style.setProperty('--scroll-thumb', '#333');  

    document.documentElement.style.setProperty('--scroll-track', '#111');  

  } else {  

    document.documentElement.style.setProperty('--scroll-thumb', '#4CAF50');  

    document.documentElement.style.setProperty('--scroll-track', '#f1f1f1');  

  }  

}  

Update your CSS to use variables:

css

Copy

:root {  

  --scroll-thumb: #4CAF50;  

  --scroll-track: #f1f1f1;  

}  


::-webkit-scrollbar-thumb {  

  background: var(--scroll-thumb);  

}  


::-webkit-scrollbar-track {  

  background: var(--scroll-track);  

}  


html {  

  scrollbar-color: var(--scroll-thumb) var(--scroll-track);  

}  

Example 2: Smooth Scrolling

Make scrolling feel smoother:

javascript

Copy

document.querySelectorAll('a[href^="#"]').forEach(anchor => {  

  anchor.addEventListener('click', function(e) {  

    e.preventDefault();  

    const target = document.querySelector(this.getAttribute('href'));  

    target.scrollIntoView({ behavior: 'smooth' });  

  });  

});  

Step 3: Testing Across Browsers

Not all browsers support custom scrollbars the same way. Here’s how to handle it:

  • WebKit (Chrome/Safari/Edge): Full styling options.

  • Firefox: Limited to color and thickness.

  • Internet Explorer: No support—stick to defaults.

Always test your design in multiple browsers to avoid surprises.

Common Pitfalls & Fixes

  1. Scrollbar Overlaps Content
    Fix: Add padding to the right of your content:

css

Copy

body {  

  padding-right: 12px; /* Match scrollbar width */  

}  

  1. Mobile Compatibility
    Mobile browsers often hide scrollbars. Focus on desktop styling unless you’re using JavaScript-based scrollbars.

  2. Performance Issues
    Avoid heavy animations on the scrollbar—they can slow down older devices.

When to Ask for Help

If coding this feels overwhelming, a website designing company in India can handle the technical bits while you focus on your site’s goals. They’re pros at balancing aesthetics and functionality.

Final Tips

  • Keep it simple: Don’t make scrollbars too flashy—they should help, not distract.

  • Use CSS variables: Makes updating colors easier later.

  • Test with real users: Get feedback to ensure your scrollbar feels natural.

Custom scrollbars are a small detail with big impact. Whether you code it yourself or partner with a website designing company in India, this tweak can make your site feel polished and cohesive.

Comments

Post a Comment

Popular posts from this blog

The Benefits of Custom Website Development vs. Template Solutions

Image
  The most critical aspects of establishing a robust web presence is the development of a website to convey your brand identity, and meet the specific needs of your target audience. When embarking on this journey, businesses often face a pivotal decision: to invest in custom website development or to utilize pre-designed template solutions.  Of course, when it comes to functionality, performance, and marketing, a custom-built website is often preferable over website templates. However, many businesses often make the mistake of opting for the shortcut route. “That’s one of the major issues with some of the clients,” says a Web Developer from Dzinepixel, a growing website designing company in India . “They choose templates thinking it will save them money and time, but often they end up with limitations in functionality and scalability that can affect their long-term success. Custom-built websites offer tailored solutions that better meet specific business needs and provide grea...
Read more

How Social Media Platforms like Instagram and Facebook Are Redefining E-Commerce

Image
  Social media platforms are no longer just spaces for sharing photos and connecting with friends. Platforms like Instagram and Facebook have transformed into thriving marketplaces where businesses can sell products directly to their audience. This shift has made it easier for small businesses and large brands alike to grow their e-commerce presence. In this blog, we’ll explore the role of these platforms in e-commerce and when a web developer might be helpful for setting up advanced features. 1. Basic Social Media Shops For small businesses and startups, social media platforms offer simple tools to set up online shops without needing technical expertise.  Instagram, Facebook, and Pinterest  allow you to create a shop directly on the platform. This is a great option for sellers who want to reach their audience without building a separate website. Here’s what you need: A business account on the platform. A product catalog uploaded through your e-commerce platform like Shop...
Read more

Unlocking Success: Why Your Business Needs the Best SEO Agency in Bhubaneswar

  In today's digital age, businesses must adapt and evolve to stay relevant. One key strategy is Search Engine Optimization (SEO). SEO helps your website rank higher in search engine results, leading to increased visibility, more traffic, and ultimately more conversions. But not all SEO efforts are created equal. Partnering with the best SEO agency in Bhubaneswar can give your business the competitive edge it needs. The Role of SEO in Business Growth SEO is more than just stuffing keywords into your content. It’s a comprehensive approach to enhancing the user experience, improving site speed, optimizing content, and securing high-quality backlinks. These tactics together help search engines like Google recognize your site as relevant and authoritative, pushing it up in the rankings. Businesses that invest in SEO can expect: Higher visibility for their products and services. Increased organic website traffic. More qualified leads, as SEO targets the right audience. Improved brand c...
Read more