A humble request for some new features

[TanimMahbub]

This post contains some requests and some questions, all about new features and future plans. Let's start with appreciating @KingSora for this nice plugin. Thank you so much for making the custom scrollbar much more accessible.

I use custom scrollbars a lot, so I have seen almost all of them. This is the best I have seen in perfection. However, there was another jQuery plugin that I have seen but never used. I always wished it was in vanilla JS. The reason I never used it (I meant in a real-life project; I have tried it in personal tests) is it's not maintained properly and has issues.

I'm mentioning that plugin here for two reasons:

1. It has pre-built themes.
2. It features functional arrows (which is also my Feature Request).
   • If we can have themes like that, it would be a dream come true.

Feature Request 1: Functional arrows (top, bottom for vertical, and left, right for horizontal scrollbar) and options for icons, web font, or SVG/PNG images to use as arrows.

Feature Request 2: Pre-built themes, so we can just call the theme's name we like, and that would be all for the installation, instead of customizing every single option one by one.

---

Now, about the questions I have:

1. Do you have plans to add options for smooth scrolling?
2. What if someone wants to use OverlayScrollbars with a smooth scroller plugin like Lenis or Locomotive? These plugins kind of affect every element on the page.

When I think about the things I would do if I had certain skills, these are the ideas that come to my mind first, never shared these with anyone, but after seeing and using the OverlayScrollbars plugin I just had to put them in front of you.

Thank you again for the great resource, and I wish you the best of luck.

[KingSora]

Good day @TanimMahbub :)

Sorry for the late answer, but the past weeks were busy and I wanted to take my time to answer your questions and requests.

1. Back in v1 I thought about this a lot and there was even a version with arrows (pre release) but in the end I removed it from the final version because the increased bundle size was simply too large for such a "niche" feature. Most users just want a clean, minimal and simple scrollbar and would not use arrow feature anyway. In v2 I could create a Plugin which handles this feature for you so it doesn't bloat the bundle of the plugin and is purely opt-in. The HTML structure of the scrollbar is built in a way that additional elements can be added with ease.

2. In version v1 there have been pre-built themes (https://kingsora.github.io/OverlayScrollbars/v1/#!themes) and I planned to port them to v2 but I didn't have enough time at first and then completely forgot about them.. I could bring them back and I would appreciate if the community would also create and share their own themes for others to use

Regarding you questions:

1. In case you mean "Smooth scrolling" like "If I scroll with the mouse wheel I want a smooth scroll offset transition": If this smooth scroll transition is working with the native scroll mechanism and is not using anything else (like transform: translate(), then I thought about creating an plugin for it in the past, but since there was simply no demand until now I didn't do it. In case you mean "Smooth scrolling" like "programmatically scrolling to a different scroll offset": In this case I always point to the native scrollTo({ behavior: 'smooth' }) function. But since it doesn't have any additional options (like custom duration or easing) I do understand that for some people it isn't enough. I would not like to implement this feature to OverlayScrollbars itself since it could be a library on its own and has nothing to do with OverlayScrollbars per se.

2. As long as the smooth scroller plugins use the native scroll mechanism for their transition they should be perfectly compatible with OverlayScrollbars. I've taken a look and Lenis seems to be such a candidate. - Here is an quick example: https://stackblitz.com/edit/overlayscrollbars-qnky6c?file=src%2Flenis.ts You just have to handle nested scrolling yourself correctly (described in Lenis README). If the scroller plugin uses a different mechanism to achieve smooth scrolling (e.g. transform: translate()) then OverlayScrollbars is not compatible at the moment. Its not too much work to make it compatible but I would need to create a effective and simple API for that which would not bloat the bundle and is completely Opt-in in the best case (so it can be tree shaken).

I hope you got all your answers... If you have further questions or I missed something please don't hesitate to ask! :)

[TanimMahbub]

Thank you so much for taking the time to give this detailed answer, I didn't know about the pre-built themes in v1, I'll check them all one by one.

Have a nice one @KingSora

[AliYar-Khan]

theming is good option to have and currently required in one of my projects. If they can be ported in new version. That would be great

[KingSora]

@TanimMahbub A small update here:

I've invested a substantial amount of time into research about smooth scrolling for desktop and mobile. This includes understanding the scrolling strategy of Android, iOS, Chromium and Firefox. I'll very likely create a separate library and / or plugin. The main difference to existing solutions like lenis will be the focus on control, accessibility and correctness, especially touch scrolling is an area which all smooth scrolling plugins are struggeling with.

That being said, I dont know yet when I'll be finished but I'll keep you updated :)

[vickey-dev]

Thanks for the wonderful library, it saved me a lot of time on customized scrollbars, @KingSora!

As a token of gratitude, I have updated all the themes from v1 to be compatible with v2 of the OverlayScrollbars. If anyone is looking for these updated themes, you can refer this page https://vickey-dev.github.io/scroll-themes-overlayScrollbars/.

These themes are based on the original designs from OverlayScrollbars v1 and have been adapted to work with v2 of the library.