Convert Figma logo to code with AI

Grsmto logosimplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

6,034
535
6,034
104

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

  1. Basic implementation:
import SimpleBar from 'simplebar';

new SimpleBar(document.getElementById('myElement'));
  1. 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>
  );
}
  1. Customizing options:
new SimpleBar(document.getElementById('myElement'), {
  autoHide: false,
  forceVisible: true,
  clickOnTrack: false
});

Getting Started

  1. Install SimpleBar:

    npm install simplebar
    
  2. Import SimpleBar in your JavaScript file:

    import SimpleBar from 'simplebar';
    
  3. Add the SimpleBar CSS to your project:

    <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
    
  4. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.

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

NPM DownloadsLast 30 Days