How to use simplebar - 10 common examples

if (html_map[path]) {
        $(".markdown .content").html(html_map[path]);
        render_code_sections();
        scrollToHash(markdownSB);
    } else {
        loading.name = path;
        fetch_page(path, function (res) {
            html_map[path] = res;
            $(".markdown .content").html(html_map[path]);
            loading.name = null;
            scrollToHash(markdownSB);
        });
    }
};

new SimpleBar($(".sidebar")[0]);

$(".sidebar.slide h2").click(function (e) {
    const $next = $(e.target).next();

    if ($next.is("ul")) {
        // Close other article's headings first
        $('.sidebar ul').not($next).hide();
        // Toggle the heading
        $next.slideToggle("fast", "swing");
    }
});

$(".sidebar a").click(function (e) {
    const path = $(this).attr("href");
    const path_dir = path.split('/')[1];
    const current_dir = window.location.pathname.split('/')[1];

mounted() {
		// Don't set it up if it's already destroyed.
		if (this._isDestroyed) {
			return;
		}

		// The scrollable element will change if we are using simplebar.
		this.scrollElement = this.$el;
		if (this.shouldOverlay) {
			this._simplebar = new SimpleBar(this.scrollElement, {
				wrapContent: false,
				scrollbarMinSize: 30,
				// Only autohide vertical scrollbars since they're easy to scroll with a
				// mouse/trackpad.
				autoHide: !this.horizontal,
			});

			this.scrollElement = this._simplebar.getScrollElement() as HTMLDivElement;
		}

		// We need to create the inview container before we can put the content
		// into the DOM. This way we can pass the container to the inview parent
		// component so that it has the correct scroller.
		this._scrollWatcher = new ScrollWatcher(this.scrollElement);
		this._inviewContainer = new ScrollInviewContainer(
			this._scrollWatcher,

exports.get_scroll_element = function (element_selector) {
    const element = element_selector.expectOne()[0];
    const sb = SimpleBar.instances.get(element);
    if (sb) {
        return $(sb.getScrollElement());
    } else if ('simplebar' in element.dataset) {
        // The SimpleBar mutation observer hasn’t processed this element yet.
        // Create the SimpleBar early in case we need to add event listeners.
        return $(new SimpleBar(element).getScrollElement());
    }
    return element_selector;
};

return false;
            }

            for (let i = 0; i < messages.length; i++) {
                this.addEntry(NotificationCenter.getTitle(
                    messages[i]),
                    messages[i].name,
                    messages[i].created,
                    messages[i].thumb,
                    messages[i].mark,
                    messages[i].itemId,
                    messages[i].id,
                    messages[i].message
                );
            }
            new SimpleBar(this.messageContainer);

            this.getNotifications(false).then((notifications) => {
                let messages = notifications.messages;

                if (messages.length <= 0) {
                    return false;
                }

                for (let i = 0; i < messages.length; i++) {
                    console.log($(this.messageContainer).find(`notification-${messages[i].id}`));
                    $(this.messageContainer).find(`#notification-${messages[i].id}`)[0].classList.add('new');
                }
            });
        });
    }

render: function () {
                this.parent();
                _this.comments = [this.$commentForm.find('textarea')[0]];
                _this.commentsContainer = this.$container;
                _this.commentsContainer[0].classList.toggle('wide', _this.commentsWide);
                _this.commentsContainer[0].classList.toggle('closed', _this.commentsClosed);
                _this.commentsContainer[0].classList.add('loaded');
                new SimpleBar(this.$container[0]);

                let commentSwitch = this.$container.find('.comments-switch')[0];
                let commentsClose = this.$container.find('.comments-toggle')[0];
                commentSwitch.addEventListener('click', () => {
                    this.$container[0].classList.toggle('wide');
                    _this.commentsWide = this.$container[0].classList.contains('wide');

                    window.localStorage.setItem('comments_wide', _this.commentsWide);
                });

                commentsClose.addEventListener('click', () => {
                    this.$container[0].classList.toggle('closed');
                    _this.commentsClosed = this.$container[0].classList.contains('closed');

                    window.localStorage.setItem('comments_closed', _this.commentsClosed);
                })

componentDidMount() {
    new SimpleBar(document.getElementById('manual-instantiation'));
    new SimpleBar(document.getElementById('with-classnames'), {
      classNames: { vertical: 'my-custom-class' }
    });

    for (let scrollArea of document.getElementsByClassName('demo-nested')) {
      new SimpleBar(scrollArea, {
        autoHide: false
      });
    }
  }

this.$nextTick(function () {
                            new SimpleBar(document.getElementById('twitter_tags'))
                        });
                    });

this.$nextTick(function () {
                            new SimpleBar(document.getElementById('hn_posts'))
                        });
                    });

this.$nextTick(function () {
                            new SimpleBar(document.getElementById('exponent_posts'))
                        });
                    });

mounted () {
    const options = SimpleBar.getOptions(this.$refs.element.attributes);
    this.SimpleBar = new SimpleBar(this.$refs.element, options);
  },
  computed: {