Detect scrollLeft Property In RTL Direction - rtl-scroll.js

The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.

If the page's direction is rtl (right-to-left), Firefox scrolls from zero to negative numbers and Google Chrome from positive numbers to zero.

The rtl-scroll.js is such a jQuery plugin created to detect and fix the scrollLeft differences in different browsers, without browser detection.

How to use it:

1. Download and load the jquery.rtl-scroll.js script after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.rtl-scroll.js"></script>

2. Check the scrollLeft type in the current browser.

alert($.support.rtlScrollType);

3. It will return 3 types of scrollLeft:

• WebKit: default
• Firefox: negative
• IE: reverse

More Resources:

• Element.scrollLeft API
• jQuery scrollLeft in rtl direction - Different value in FireFox & Chrome
• Better way to get the viewport of a scrollable DIV in RTL mode

Changelog:

2020-02-24

• Fixed for IE6

2020-02-19

• Plugin should work if script tag placed in head
• IE6/7 only support inline-block on default inline elements

2020-02-17

• Detect Element.prototype.scrollIntoView

2020-02-16

• Use a 'position: fixed' scroller.

---

This awesome jQuery plugin is developed by othree. For more Advanced Usages, please check the demo page or visit the official website.