Search code examples
javascriptjquerysimplebar

jQuery Simplebar plugin doesn't work with class element

Using Simplebar Plugin I try to create scrollbar with class element like this documents. but in action this plugin doesn't work.

HTML:

<div class="simple-bar">
  //data
</div>

JS:

$('.simple-bar').each(element, new SimpleBar());

DEMO HERE

Solution 
  • $('.myElements').each(element, new SimpleBar());

    This is the example in the SimpleBar documentation that your question is relating two. This example in the documentation is flawed.

    There are two forms of each() in jQuery. There is the jQuery.each method and the jQuery.fn.each method, which is a wrapper around the first one. The difference being that jQuery.fn methods are designed to act upon an instance of jQuery with a result stack in it (ex. the result of a $(...) expression). The jQuery.each is not written to operate upon an existing instance, and is instead expected to be given both the elements to operate upon, and the callback related to the work needing to be done.

    Given this, the usage that their documentation shows is incorrectly trying to use the jQuery.fn.each as if it were the jQuery.each form.

    $('.simple-bar').each((index, element) => new SimpleBar(element));`

    This form correctly uses the jQuery.fn.each version, giving it just the callback that will be used to perform work against the result stack in the jQuery instance.