Selector config to accept CSS selector string. Entrance animation for scroll track. Relative scrolling method.

[alexfain]

Hello, I have implemented your scrollbar and it is awesome!!

I have 3 suggestions.

A first suggestion in case someone needs to implement multiple scrollbars on the page and can't set individual IDs to be known beforehand will be to update the following lines:

[37] this.selector = options.selector || defaults.selector;
[271] let selectorElement = document.querySelector(this.selector);

• as this enables developer to initialize the scroller by CSS selector string and not only by the ID, I have modified the file on my project and it works as a charm.

Second suggestion: maybe adding an entrance animation to the .lms_scroll_track will help prevent some unwanted flickering when initially the scrollbar is display: none, something simple like:

.lms_scroll_track{
    animation: appear .5s ease forwards;
}
@keyframes appear { from{ opacity: 0; } to{ opacity: 1; } }

Third suggestion is to add a new method or second parameter (boolean) on the .scrollTo method for the scrolling amount to be relative to the current scroll position.

var scrollEl = instance.mainElement.querySelector('.lms_content_wrapper');
instance.scrollTo(scrollEl.scrollTop + 150);

Besides that your code is splendid and also great job for reserving the native scrolling.

[BMSVieira]

Hey,

Thank you for all the sugestions, it makes sense. Im glad you used it with no problems besides those "little" things.

Please, submit a pull request with the modifications you sugested so you will be in the Contributors!