A tool detecting if RTL scroll value should be negative.
× LIVE EXAMPLE ×
Working with RTL horizontal scrolling can be a bit frustrating because RTL scroll handling differs between browsers.
Chrome scrollLeft
value acts like there is no RTL al all, while FireFox and IE make scrollLeft
a negative number.
This tool gives you an answer should you reverse RTL scroll value in certain browser or not.
npm install @xobotyi/should-reverse-rtl-scroll
# or via yarn
yarn add @xobotyi/should-reverse-rtl-scroll
INSTALLATION NOTE:
This lib is written in TypeScript and delivered with both, transpiled and untranspiled ES versions:
main
field of package.json is pointing to transpiled ES5-compatible version with CJS modules resolution;module
field is pointing to transpiled ES5-compatible version with ES modules resolution;esnext
field is pointing to the ESnext version with ES modules resolution;
OR
you can add it directly to your site via the <script />
with help of UNPKG:
<script src="https://unpkg.com/@xobotyi/should-reverse-rtl-scroll/dist/index.min.js"/>
After that you will be able to use the function as xobotyi.shouldReverseRtlScroll()
import { shouldReverseRtlScroll } from "@xobotyi/should-reverse-rtl-scroll";
shouldReverseRtlScroll(); // true for FireFox, IE and false for Chrome or SSR
// or undefined if to call it too early [read below]
This function caches the value to bring the less possible performance impact. In case you want to get re-calculated value - pass true
as first call parameter.
NOTE:
Function will returnundefined
in case being called before the DOM is ready.
- react-scrollbars-custom — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
- zoom-level — A comprehensive cross-browser package that allow you to determine page's and element's zoom level.
- @xobotyi/scrollbar-width — A tool to get browser's scrollbars width.