2018-07-13 admin


什么是simplebar,Custom scrollbars with native scroll, done simple, lightweight, easy to use and cross-browser.


` tag**

<link rel="stylesheet" href="" />
<script src=""></script>
<!-- or -->
<link rel="stylesheet" href="">
<script src=""></script>

note: you can replace @latest to the latest version (ex @2.4.3), if you want to lock to a specific version


If you are using a module loader (like Webpack) you first need to load SimpleBar:

import 'simplebar'; // or "import SimpleBar from 'simplebar';" if you want to use it manually.
import 'simplebar/dist/simplebar.css';

Set data-simplebar on the element you want your custom scrollbar. You’re done.

<div data-simplebar></div>

Don’t forget to import both css and js in your project!

<g-emoji class=“g-emoji” alias=“warning” fallback-src=“”>⚠️</g-emoji>Warning!

SimpleBar is not intended to be used on the body element! I don’t recommend wrapping your entire web page inside a custom scroll as it will often affect badly the user experience (slower scroll performances compare to native body scroll, no native scroll behaviours like click on track, etc.). Do it at your own risk! SimpleBar is meant to improve the experience of internal web pages scroll: like a chat box or a small scrolling area. Please read the caveats section first to know the limitations!


If you are experiencing issues when setting up SimpleBar it is most likely because your styles are clashing with SimpleBar ones. Make sure the element you are setting SimpleBar on does not override any SimpleBar css properties! We recommend to not style at all that element and use an inner element instead.

  1. Documentation
  2. Browsers support
  3. Demo
  4. How it works
  5. Caveats
  6. Changelog
  7. Credits

1. Documentation

Other usages

You can start SimpleBar mannually if you need to:

new SimpleBar(document.getElementById('myElement'))

If you want to use jQuery:

new SimpleBar($('#myElement')[0])


Options can be applied to the plugin during initialization:

new SimpleBar(document.getElementById('myElement'), {
    option1: value1,
    option2: value2

or using data-attributes:

<div data-simplebar data-simplebar-auto-hide="false">

Available options are:


By default SimpleBar automatically hides the scrollbar if the user is not scrolling (it emulates Mac OSX Lion’s scrollbar). You can make the scrollbar always visible by setting the autoHide option to false:

new SimpleBar(document.getElementById('myElement'), { autoHide: false });

Default value is true

You can also control the animation via CSS as it’s a simple CSS opacity transition.


Define the minimum scrollbar size in pixels.

Default value is 10


It is possible to change the default class names that SimpleBar uses. To get your own styles to work refer to simplebar.css to get an idea how to setup your css.

  • content represents the wrapper for the content being scrolled.
  • scrollContent represents the container containing elements being scrolled.
  • scrollbar defines the style of the scrollbar with which the user can interact to scroll the content.
  • track styles the area surrounding the scrollbar.
classNames: {
  // defaults
  content: 'simplebar-content',
  scrollContent: 'simplebar-scroll-content',
  scrollbar: 'simplebar-scrollbar',
  track: 'simplebar-track'

Notifying the plugin of content changes

Note: you shouldn’t need to use these functions as SimpleBar is taking care of that automatically. This is for advanced usage only.

If you later dynamically modify your content, for instance changing its height or width, or adding or removing content, you should recalculate the scrollbars like so:

var el = new SimpleBar(document.getElementById('myElement'));

Trigger programmatical scrolling

If you want to access to original scroll element, you can retrieve it via a getter :

var el = new SimpleBar(document.getElementById('myElement'));

Subscribe to scroll event

You can subscribe to the scroll event just like you do with native scrolling element :

var el = new SimpleBar(document.getElementById('myElement'));
el.getScrollElement().addEventListener('scroll', function(...));

Add content dynamically (ajax)

You can retrieve the element containing datas like this :

var el = new SimpleBar(document.getElementById('myElement'));

Disable Mutation Observer


Non-JS fallback

SimpleBar hides the browser’s default scrollbars, which obviously is undesirable if the user has JavaScript disabled. To restore the browser’s scrollbars you can include the following noscript element in your document’s head:

    [data-simplebar] {
      overflow: auto;


转载请注明:文章转载自 JavaScript中文网 []