Comments (7)
I forget to say I changed hideNativeScrollbars: function this way:
...
var size = G.nativeScrollbarSize,
scrollElStyle = scrollEl.style;
if(size === 0) {
// hide Webkit/touch scrollbars
var time = Date.now();
scrollEl.setAttribute('data-scroll', time);
return Utils.addCssRule('[data-scroll="' + time + '"]::-webkit-scrollbar', 'display:none;width:0;height:0;');
} else {
if( GS.rtl == true ) {
scrollElStyle.left = -size + 'px';
...
from optiscroll.
Rtl support is actually a good idea.
Do you think is it better as an option (like you did) or by checking the directionality of the element (with getComputedStyle(el).direction === 'rtl'
)?
Anyway, I've tried to set html[dir="rtl"]
to Optiscroll website and as you wrote, I had to change the js a bit and the style to be:
.optiscroll-v { left:0; }
.optiscroll-vtrack { left: 4px; }
.optiscroll.has-vtrack.has-htrack > .optiscroll-h { left: 8px; right: 4px; }
However, what do you mean by "the drag zone is still under the original scrollbar"? Are you referring to the horizontal scrollbar?
from optiscroll.
Checked again but still the same problem with windows 10/chrome: the (trackbar) drag and drop zone is still where the old scrollbar was and the vertical grayed trackbar is displayed 6/10 pixels at right of this drag zone. Like a ghost effect. Strangely there is no problem for the div I use as the main wrapper (width/height:100%). No problem too with firefox/edge/ie11. However with these browsers the text is hilighted when I move the trackbar. I don't use horizontal scrollbars.
getComputedStyle(el).direction === 'rtl' in your code would be nice!
from optiscroll.
Please have a look at v3
branch. Run grunt build
and open the index.html
file. The scrollable box on the right is rtl
and it should work ok.
from optiscroll.
Thank-you Alberto!
It works fine on chrome but still buggy on FF/Edge (divs text highlighted when moving the trackbars). I migrated to NiceScroll which works fine at the price of 60KB minified + JQuery... :/
from optiscroll.
Well, I've re-checked the code and tested it on FF/Edge: when dragging the scrollbars the selection is prevented.
However the default style of the scrollbars make dragging them quite tricky, so I've noticed that if you miss the target then you are going to trigger the selection. But that is an UX issue.
Anyway, FYI v3 will be ready soon.
from optiscroll.
Merged #26
from optiscroll.
Related Issues (20)
- Optiscroll doesn't disable native scrollbars on Firefox on Mac HOT 7
- native scrollbar shows when zooming out HOT 2
- Is it possible to click on the scrollbar to scroll? HOT 1
- NPM package? HOT 3
- Window scroll event and offset lost HOT 2
- initialised event HOT 2
- Mouse drag event doesn't work on touchscreen laptops HOT 13
- Can't click and drag to scroll in Firefox 54 HOT 3
- contentElement settings option? HOT 3
- Can't get it working HOT 3
- Scroll dynamic elements HOT 2
- Event callback HOT 2
- How to destroy() Optiscroll? HOT 8
- Nested scrolling is jerky on iOS (iPad) HOT 4
- Can not get default Browser scroll bars to hide HOT 2
- AOS Animate and Optiscroll conflict -Stops animation on scroll
- textarea element HOT 4
- option to disable the <div class="optiscroll-h"> markup HOT 1
- multiple scrolls? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from optiscroll.