https://github.com/othree/jquery.rtl-scroll-type

Detect scrollLeft type under RTL language
https://github.com/othree/jquery.rtl-scroll-type

jquery jquery-plugin rtl scrollleft

Last synced: 2 months ago
JSON representation

Detect scrollLeft type under RTL language

• Host: GitHub
• URL: https://github.com/othree/jquery.rtl-scroll-type
• Owner: othree
• License: mit
• Created: 2012-09-18T03:07:12.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2020-02-24T09:08:44.000Z (almost 5 years ago)
• Last Synced: 2024-10-06T18:15:31.613Z (3 months ago)
• Topics: jquery, jquery-plugin, rtl, scrollleft
• Language: JavaScript
• Size: 26.4 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery RTL Scroll Type Detector

Horizontal scrollbar with RTL(right to left) language support has different

implementations in different browsers.

[scrollLeft][mdn-scrollleft] in RTL element is not defined by any spec or

standards. So different browsers have different implementations. As far as I

know, there are three implements: Chrome(Blink), Firefox/Safari, IE.

Chrome's RTL scrollbar is the same as LTR(left to right) element. Except for

the initial position of the scrollbar controller is at the most right position.

Firefox has a clear definition in its MDN document. The most right position

stands for 0. And when the user scrolls to the 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 the left. Value increases.

A table is below to show these types more clear.

This plugin is designed to detect which type is the browser is using. Assign

the result to jQuery's support object named **rtlScrollType**. You will need

the scrollWidth of the element to transform between these three types of value.

[mdn-scrollleft]: https://developer.mozilla.org/en-US/docs/DOM/element.scrollLeft

## 3 Types of scrollLeft (scrollWidth = 100)

  Browser

  Type

  Most Left

  Most Right

  Initial

  Chrome/Opera(Blink)/Edge(Blink)/IE6

  default

  0

  100

  100

  Standard/Firefox/Safari/Opera(Presto)

  negative

  -100

  0

  0

  IE8 and later

  reverse

  100

  0

  0

## Usage

See [demo][].

[demo]: https://github.com/othree/jquery.rtl-scroll-type/blob/master/demo/look.html

## Web Standard

It's defined in [CSSOM View Module][cssomvm]. The **negative** type is the

chosen one. Chrome has a [plan][chplan] to change its behavior. More

information is at [#6][].

[cssomvm]: https://drafts.csswg.org/cssom-view/

[chplan]: https://www.chromestatus.com/feature/5759578031521792

[#6]: https://github.com/othree/jquery.rtl-scroll-type/issues/6

## License

Copyright (c) 2012 Wei-Ko Kao

Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the "Software"), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in

all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

THE SOFTWARE.