What is this?
A JavaScript library that lets you customize or hide scrollbars in your web pages. Works with plain HTML, React, and any JavaScript framework.
Interactive Demo
Click the buttons below to change the scrollbar style on this page:
Scrollable Box
This box has its own custom scrollbar. Try scrolling inside it!
StylisticScroll works by injecting CSS that targets scrollbar elements across different browsers.
It handles Chrome, Safari, Edge, Firefox, and other modern browsers automatically.
You can customize the color, width, opacity, and even completely hide the scrollbar.
The scrollbar can have different styles on different elements on the same page.
Hover over the scrollbar to see the opacity change effect.
This demo shows how flexible and easy to use StylisticScroll is.
Keep scrolling to see more content and test the scrollbar behavior.
The library is lightweight with zero dependencies for vanilla JavaScript.
React support is available with custom hooks and components.
You can use it with TypeScript thanks to included type definitions.
Installation takes less than a minute with npm
Installation
Step 1: Install the package
npm install stylisticscroll
Step 2: Use in your project
For HTML (no build tool needed)
<script src="node_modules/stylisticscroll/browser.js"></script>
<script>
stylisticScroll({ color: '#ff0000' });
</script>
For JavaScript projects (with bundler)
const stylisticScroll = require('stylisticscroll');
stylisticScroll({ color: '#ff0000' });
For React
import { useScrollbarStyles } from 'stylisticscroll/react';
function App() {
useScrollbarStyles({ color: '#ff0000' });
return <div>Your content</div>;
}
Code Examples
Change scrollbar color
stylisticScroll({ color: '#ff0000' });
Make it wider and more visible
stylisticScroll({
color: '#000000',
width: '12px',
thumbOpacity: 0.8
});
Hide scrollbar completely
stylisticScroll({ hideScrollbar: true });
Style a specific element
applyScrollbarStylesToElement('#my-div', {
color: '#ff0000',
width: '10px'
});
How It Works
You call the function
Pass in your color and style preferences as options.
CSS is generated
The library creates browser-specific CSS for scrollbar styling.
Styles are applied
A style tag is injected into your page with the custom scrollbar CSS.
Cross-browser support
Works automatically on Chrome, Safari, Edge, Firefox, and Opera.
Features
No Dependencies
Works standalone without requiring any other libraries.
Tiny Size
Lightweight code that loads fast and runs efficiently.
TypeScript Support
Includes type definitions for TypeScript projects.
React Ready
Built-in hooks and components for React applications.
Easy Cleanup
Returns a function to remove styles when needed.
Browser Compatible
Supports all modern browsers automatically.