Steps to reproduce
Please, join the discussion at https://github.com/w3c/csswg-drafts/issues/1354 for closing this one once and for all.
From https://github.com/othree/jquery.rtl-scroll-type -
Horizontal scrollbar with rtl(right to left) language support have different implement in different browsers.
[scrollLeft][mdn-scrollleft] in rtl element is not defined by any spec or standards. So different browser have different implement.
As far as I know, there are 3 implements: WebKit, Firefox/Opera, IE. WebKit’s implement is the most easy to use implement.
Exactly the same as ltr(left to right) element. Except the initial position of scrollbar controller is at most right position.
Firefox has a clearly define in their mdn document. The most right position stands for 0. And when user scrolls to left. The value decreases. The value is possible to be negative in this implement.
IE thought the element is flip horizontal. So the most right position is 0. And if it scrolls to left. The value increase.
A table is below to make these cases more clear.
3 Types of scrollLeft (scrollWidth = 100)
Browser Type Most Left Most Right Initial WebKit default 0 100 100 Gecko negative -100 0 0 IE reverse 100 0 0
The current cross-browser situation is pretty awful, the most sane behavior (whichever it may be) should be specified.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “James M.”
Changed Assigned To to “Travis L.”
Changed Status to “Confirmed”
writing-modealso lacks interoperability. See https://jsfiddle.net/g67s0046/15/
- Firefox and Chrome:
pageXOffsetdecreases as you scroll to left.
pageYOffsetincreases as you scroll to left.
Should I open new issue for
- Firefox and Chrome:
@Nao - yeah, just file a new issue. Worst case, it will be closed as a duplicate. Make sure you file bugs in the issue trackers of all of the browsers as well as the specification, in order to get to interoperability.
@Numbs - Thanks. I filed https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16995001/ and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16995351/ for Edge.
WebKit matches Gecko.
Test case from WebKit -
(Blink uses negative scrollLeft values for document-level scrolls and positive/regular for element-level scrolls. This is obviously confusing.)
Edge still uses reverse (right most is 0).