Giters

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

Support for right-to-left languages

ashraffayad opened this issue · comments

commented

Nice work.
For the horizontal scrollbar, would be great to have support for right-to-left languages. Like 'Arabic','Hebrew','Farsi','Urdu'... etc.

commented

Hi Ashraf, absolutely, that’s important.

I just made a quick test by setting the direction: rtl; css-declaration on my scrollable element and the scroll event works as expected. However if I click the scrollbar-track or if I try to drag the scroll-thumb then the behavior is broken.

Is that what you are referring to? or better, can you list the problems you are facing right now by using this lib? also, a small jsbin, codepen, etc would be useful too. I just want to have a better understanding about the problem/s that needs to be solve.

:) thank you

commented

Hi noeldelgado,

Thanks for responding. I really like the scrollbar you created. Specially the elegant, simple css.
I created a "gist". with 2 horizontal scrollers. The second one has 'direction:rtl' in the style of the parent div.

http://requirebin.com/?gist=0847f1bb9ef757414516

  • On the latest Chrome, the scroll-thumb doesn't display at all.
  • On the latest Firefox, the scroll-thumb displays and is correctly aligned to the right side as it should, however, it scrolls only after dragging far to the left side.

I hope this helps.

Thank you.

commented

Thank you @ashraffayad!, that helps. ;)

For now, about the implementation, I am thinking about adding a new option e.i. rtl: {Boolean} [false], which in case to be true it will add the direction: rtl; css-declaration to the element and handle the drag|click accordingly. Just need to find some time to work on it.

commented

Usually the direction:rtl is set on the <html> element and it propagates down the dom tree.
for example <html lang="ar" class="rtl">

Would it be nicer to make the scrollbar "direction-sensitive" by default?
If the direction:rtl already exists somewhere up the dom tree, then there's no need to add it again in the plugin css-declaration.

You could easily detect that and invert the calculations accordingly.

var isRtl = getComputedStyle(scrollElementl).direction === 'rtl';
if(isRtl){
    // go ahead and invert the calculations
}
commented

@ashraffayad that's even better, like it 👍