simplebar
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
Top Related Projects
Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
nicescroll plugin for jquery - scrollbars like iphone/ipad
A lightweight script to animate scrolling to anchor links.
Quick Overview
SimpleBar is a custom scrollbar plugin that aims to replace native browser scrollbars with a lightweight, customizable alternative. It's designed to work across various browsers and devices, providing a consistent and visually appealing scrolling experience while maintaining high performance.
Pros
- Easy to implement and customize
- Lightweight and performant
- Cross-browser and cross-device compatibility
- Supports both vertical and horizontal scrolling
Cons
- May not perfectly mimic native scrollbar behavior in all cases
- Requires JavaScript to function, which could be a drawback for some projects
- Limited built-in theming options (though customizable via CSS)
Code Examples
- Basic implementation:
import SimpleBar from 'simplebar';
new SimpleBar(document.getElementById('myElement'));
- Using with React:
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
function MyComponent() {
return (
<SimpleBar style={{ maxHeight: 300 }}>
{/* Your content here */}
</SimpleBar>
);
}
- Customizing options:
new SimpleBar(document.getElementById('myElement'), {
autoHide: false,
forceVisible: true,
clickOnTrack: false
});
Getting Started
-
Install SimpleBar:
npm install simplebar
-
Import SimpleBar in your JavaScript file:
import SimpleBar from 'simplebar';
-
Add the SimpleBar CSS to your project:
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
-
Initialize SimpleBar on your element:
new SimpleBar(document.getElementById('myElement'));
That's it! Your element now has a custom scrollbar powered by SimpleBar.
Competitor Comparisons
Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
Pros of malihu-custom-scrollbar-plugin
- More customization options for scrollbar appearance
- Supports horizontal scrolling
- Includes additional features like auto-hide and keyboard navigation
Cons of malihu-custom-scrollbar-plugin
- Larger file size and potentially heavier performance impact
- Requires jQuery as a dependency
- Less frequently updated compared to SimpleBar
Code Comparison
malihu-custom-scrollbar-plugin:
$(".content").mCustomScrollbar({
theme: "dark",
scrollButtons: { enable: true },
autoHideScrollbar: true
});
SimpleBar:
import SimpleBar from 'simplebar';
new SimpleBar(document.getElementById('myElement'), {
autoHide: true
});
Both libraries aim to enhance scrollbar functionality and appearance, but they differ in implementation and features. malihu-custom-scrollbar-plugin offers more extensive customization options and additional features, while SimpleBar focuses on simplicity and performance. The choice between them depends on specific project requirements, such as the need for jQuery support, desired customization level, and performance considerations.
nicescroll plugin for jquery - scrollbars like iphone/ipad
Pros of jquery.nicescroll
- More customization options for scrollbar appearance
- Supports touch devices and gestures out of the box
- Includes additional features like scroll-to animations
Cons of jquery.nicescroll
- Requires jQuery as a dependency
- Larger file size and potentially higher performance overhead
- Less frequently updated and maintained compared to SimpleBar
Code Comparison
SimpleBar initialization:
import SimpleBar from 'simplebar';
new SimpleBar(document.getElementById('myElement'), {
autoHide: false
});
jquery.nicescroll initialization:
$(document).ready(function() {
$("#myElement").niceScroll({
cursorcolor: "#000000",
cursorborder: "1px solid #fff",
smoothscroll: true
});
});
Both libraries aim to enhance scrollbar functionality and appearance, but they differ in their approach and feature set. SimpleBar focuses on simplicity and performance, while jquery.nicescroll offers more customization options at the cost of a larger footprint and jQuery dependency. SimpleBar is more actively maintained and has a smaller codebase, making it potentially more suitable for modern web applications. However, jquery.nicescroll may be preferred for projects that require extensive scrollbar customization or already use jQuery.
A lightweight script to animate scrolling to anchor links.
Pros of smooth-scroll
- Lightweight and simple implementation (2.1 KB minified and gzipped)
- Supports both modern and older browsers, including IE 9+
- Easy to customize with options for offset, speed, and easing functions
Cons of smooth-scroll
- Limited to scroll animations only, unlike simplebar's full custom scrollbar functionality
- Requires manual initialization for dynamically added content
- May conflict with native smooth scrolling in some modern browsers
Code Comparison
smooth-scroll:
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 500,
offset: 50
});
simplebar:
import SimpleBar from 'simplebar';
new SimpleBar(document.getElementById('myElement'), {
autoHide: false
});
Key Differences
- simplebar focuses on creating custom scrollbars with enhanced functionality, while smooth-scroll is specifically for smooth scrolling animations
- simplebar offers more advanced features like auto-hide, RTL support, and scrolling synchronization
- smooth-scroll is more lightweight and easier to implement for basic smooth scrolling needs
- simplebar requires more setup but provides a more comprehensive scrolling solution
Both libraries serve different purposes and can be used together in a project if both custom scrollbars and smooth scrolling are required.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances.
Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours...
You keep the awesomeness of native scrolling...with a custom scrollbar!
SimpleBar does NOT implement a custom scroll behaviour. It keeps the native overflow: auto
scroll and only replace the scrollbar visual appearance.
- ð¦ Follow me on Twitter! or Mastodon!
- ð¨âð» If you like Simplebar, buy me a coffee!
Design it as you want
SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).
Lightweight and performant
Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.
Supported everywhere
SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.
Getting started
The easiest way to use SimpleBar is with the default dependency-free version: npm install simplebar
.
If you are using a framework, SimpleBar also supports the most popular ones: Vue, Angular and React.
Demo
You can check our demo page (which is also the one we use for automated tests).
Changelog
See changelog here : https://github.com/Grsmto/simplebar/releases
Credits
- KingSora for multiple features and inspirations (
height: auto
detection, RTL mode cross browser support and more) with OverlayScrollbars. - Jonathan Nicol for original idea with Trackpad Scroll Emulator.
- Cassio Bittencourt for the logo design.
Top Related Projects
Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
nicescroll plugin for jquery - scrollbars like iphone/ipad
A lightweight script to animate scrolling to anchor links.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot