noeldelgado / gemini-scrollbar

:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications

Home Page:https://noeldelgado.github.io/gemini-scrollbar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Easy way to get percent scrolled

pklada opened this issue · comments

It would be nice to easily be able to get the % scrolled rather than having to calculate ourselves (which can be kind of messy). This could be used for things like displaying shadows, etc, based on scroll %.

Something like
this.scroll.getScrolledPercent() // .4

(or if you have a good way to solve this without using private methods/vars that would be cool too)

Hey Pete! Thanks for your suggestion.

Because of this issue I noticed an existing bug and fixed it #5, so thanks a lot.

From v1.2.3 there is a method that returns the scrollable element getViewElement(). So, if you feel like handling this on your side, something like this should work:

var instance = new GeminiScrollbar({
    element: document.querySelector(‘.something’)
}).create()

var view = instance.getViewElement()

var percentage = (100 * view.scrollTop / (view.scrollHeight - view.clientHeight))

The snipped above will return a number between the range of 0 and 100.

Now, I will try to explain why I think that adding features to the lib can be problematic (even though I am not against it).

The script is supposed to do “nothing”, but to resolve a pure aesthetic issue. Keeping this mentality should help maintaining separation of concerns intact.

Also, the percentage calculated to move the thumbs is not between the range of 0-100. This is because translate percentage values are not relative to its parent, but to the element itself (the thumb). So not sure how useful can it be for us exposing this value.

Let me know if this solve your problem. If you feel like doing a PR I am likely to merge it anyway, because I am sure that having this as an independent method will not break anything, it’s just that it feels to me like going against the “philosophy” behind.

Cheers

Makes sense, thanks! I currently am handling it on our end, it would just be a nice-to-have. We are moving from jscrollpane to this library, and they had a similar method. We mainly use it to show/hide top/bottom shadows during scroll (in order to indicate if there is scrollable content).

I may make a quick PR when I have a sec this week. Thanks!