Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A humble request for some new features #602

Open
TanimMahbub opened this issue Jan 5, 2024 · 3 comments
Open

A humble request for some new features #602

TanimMahbub opened this issue Jan 5, 2024 · 3 comments

Comments

@TanimMahbub
Copy link

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).

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
Copy link
Owner

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
Copy link
Author

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants