Normalize Scroll Left for Right-to-Left
This library normalizes the
Element.scrollLeft property when direction is
Element.scrollLeft's behavior with
dir="rtl" is not defined in any spec we use
a feature detection logic to determine the behavior of the current browser.
scrollWidth = 100) (Copied from
|Browser||Type||Most Left||Most Right||Initial|
You can install this package with the following command:
npm install normalize-scroll-left
This library exposes these methods:
This function returns the scroll type detected, Keep in mind, this function caches the result as it should render a dummy on the DOM (which is expensive). Make sure the first invocation of this function happens after the body is loaded.
note: To support server-side-rendering, it will output
it detects a non-browser environment.
;const type = ;
The output is not based on the browser, but feature detection:
You can use this method to get the normalized
scrollLeft property of an element.
You should explicitly pass the direction for the following reasons:
- Querying the
getComputedStyleis expensive and might cause a reflow.
- The behavior shouldn't be changed when direction is
The output is
NaN on the server. Otherwise, it will mimic the behavior of
WebKit as it's the esiest to work with.
;;// element.scrollWidth = 100;;// scrollLeft will always be from 0 (Most Left) to 100 (Most Right).// It will initially be 100, That means the most right.
You can use this method to set the
scrollLeft property of an element as normalized.
You should explicitly pass the direction for the same reasons as
scrollWidth = 100 the argument
scrollLeft must be between
function will automatically convert it into something the current browser understands.
;;// element.scrollWidth = 100, element.clientWidth = 20;setNormalizedScrollLeftelement, 20, 'rtl';// Will set element.scrollLeft to ...// 20 in WebKit (chrome)// -60 in Firefox/Opera// 60 in IE/Edge// Does nothing on the server
The typescript type definitions are also available and are installed via npm.
This project is licensed under the MIT license.