SimpleBar Documentation

repository·master·Indexed 27 days ago

A lightweight (6kb minified) library that replaces default browser scrollbars with customizable CSS-styled ones while preserving native scrolling performance. Includes a vanilla JavaScript plugin and official framework integrations for React (simplebar-react), Angular (simplebar-angular), and Vue (simplebar-vue).

Tokens: 5.5K
Snippets: 21
Records: 53
Agent score: 91%

What's inside SimpleBar

Overview of SimpleBar
master
SimpleBar replaces the browser's default scrollbar with a custom CSS-styled one without losing performance. Unlike other plugins, it does NOT implement custom scroll behavior; it maintains native overflow: auto scrolling and only replaces the visual appearance of the scrollbar. This ensures native scrolling performance and behavior.
https://github.com/grsmto/simplebar/blob/master/README.md
Install simplebar-react
master
Install the simplebar-react package using npm or Yarn.
https://github.com/grsmto/simplebar/blob/master/packages/simplebar-react/README.md
Use the vanilla SimpleBar plugin instead of SimpleBar Core
master
The simplebar-core package is the internal core library and is not intended for direct use by end-users. If you want to use the vanilla JavaScript plugin, you should use the main simplebar package instead.
https://github.com/grsmto/simplebar/blob/master/packages/simplebar-core/README.md
Install SimpleBar via npm
master
To use the dependency-free version of SimpleBar, install it using npm.
```
npm install simplebar
```
https://github.com/grsmto/simplebar/blob/master/README.md

Install SimpleBar via CDN

master

For quick integration without a module bundler, you can include SimpleBar via <script> and <link> tags using unpkg or jsdelivr. It is recommended to replace @latest with a specific version to ensure stability.

<link
  rel="stylesheet"
  href="https://unpkg.com/simplebar@latest/dist/simplebar.css"
/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<!-- or -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

Use SimpleBar with Ruby on Rails or Ember.js
master
If you are working within specific web frameworks, use these community plugins:
- Ruby on Rails: Use the simplebar-rails gem.
- Ember.js: Use the ember-simplebars addon.
https://github.com/grsmto/simplebar/blob/master/packages/simplebar/README.md
Install SimpleBar
master
You can install SimpleBar and its required dependency resize-observer-polyfill via npm or Yarn. The polyfill is necessary for browsers that do not natively support ResizeObserver (e.g., older iOS Safari or Edge).
https://github.com/grsmto/simplebar/blob/master/packages/simplebar/README.md
Set up simplebar-vue in a Vue application
master
To use SimpleBar in your Vue project, you must register the component and import the required CSS. Ensure you import both the JavaScript component and the simplebar.min.css file.
```
import simplebar from 'simplebar-vue';
import 'simplebar-vue/dist/simplebar.min.css';

export default {
  components: {
    simplebar,
  },
};
```
https://github.com/grsmto/simplebar/blob/master/packages/simplebar-vue/README.md

Add Noscript support for SimpleBar

master

To ensure elements remain scrollable when JavaScript is disabled, include this <noscript> block in your <head> to restore native scrolling styles.

<noscript>
  <style>
    [data-simplebar] {
      overflow: auto;
    }

    .simplebar-content-wrapper {
      scrollbar-width: auto;
      -ms-overflow-style: auto;
    }

    .simplebar-content-wrapper::-webkit-scrollbar, 
    .simplebar-hide-scrollbar::-webkit-scrollbar {
      display: initial;
      width: initial;
      height: initial;
    }
  </style>
</noscript>

Framework integrations for SimpleBar
master
SimpleBar provides official support and documentation for several popular frameworks:
- React: simplebar-react
- Angular: simplebar-angular
- Vue: simplebar-vue
https://github.com/grsmto/simplebar/blob/master/README.md
Style SimpleBar scrollbars
master
SimpleBar does not have built-in styling options; you must override its default CSS classes to change the appearance.
```
/* Example: Change scrollbar color */
.simplebar-scrollbar::before {
  background-color: red;
}
```
https://github.com/grsmto/simplebar/blob/master/packages/simplebar/README.md
Install simplebar-vue
master
You can install the simplebar-vue package using npm or Yarn.
```
npm install simplebar-vue --save
# or
yarn add simplebar-vue
```
https://github.com/grsmto/simplebar/blob/master/packages/simplebar-vue/README.md