search

noeldelgado / gemini-scrollbar

:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications
https://noeldelgado.github.io/gemini-scrollbar/
MIT License
428 stars 63 forks source link

Support for right-to-left languages #20

Open ashraffayad opened 8 years ago

ashraffayad commented 8 years ago

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

noeldelgado commented 8 years ago

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

ashraffayad commented 8 years ago

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

I hope this helps.

Thank you.

noeldelgado commented 8 years ago

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.

ashraffayad commented 8 years ago

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
}
noeldelgado commented 8 years ago

@ashraffayad that's even better, like it :+1: