How to use simplebar - 10 common examples

To help you get started, we’ve selected a few simplebar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zulip / zulip / static / js / portico / help.js View on Github external
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];
github gamejolt / frontend-lib / components / scroll / scroller / scroller.ts View on Github external
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,
github zulip / zulip / static / js / ui.js View on Github external
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;
};
github MyOnlineStore / bricks / src / components / ScrollBox / style.tsx View on Github external
import styled, { css } from '../../utility/styled';
import ThemeTools from '../../themes/ExperimentalCustomTheme/ThemeTools';

/* tslint:disable */
const styles = require('simplebar/dist/simplebar.min.css').toString();
/* tslint:enable */

type ScrollBoxThemeType = {
    scrollbar: {
        background: string;
    };
};

type EffectPropsType = {
    show: boolean;
};

// prettier-ignore
const simplebarStyles = css`
    ${styles}
`;
github FlorianMaak / p0weruser / src / module / NotificationCenter.js View on Github external
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');
                }
            });
        });
    }
github FlorianMaak / p0weruser / src / module / WidescreenMode.js View on Github external
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);
                })
github Grsmto / simplebar / Demo.js View on Github external
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
      });
    }
  }
github TigerHix / HelloTab / src / components / Twitter.vue View on Github external
this.$nextTick(function () {
                            new SimpleBar(document.getElementById('twitter_tags'))
                        });
                    });
github TigerHix / HelloTab / src / components / HackerNews.vue View on Github external
this.$nextTick(function () {
                            new SimpleBar(document.getElementById('hn_posts'))
                        });
                    });
github TigerHix / HelloTab / src / components / PurdueExponent.vue View on Github external
this.$nextTick(function () {
                            new SimpleBar(document.getElementById('exponent_posts'))
                        });
                    });