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

Detect scrollLeft Property In RTL Direction - rtl-scroll.js
File Size: 4.53 KB
Views Total: 201
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.