Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
org.webjars.npm:normalize-scroll-left
Advanced tools
This library normalizes the Element.scrollLeft
property when direction is rtl
.
All the hardwork are based on this juqery plugin and this stackoverflow answer.
Since 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.
Types of scrollLeft
(scrollWidth
= 100) (Copied from
here)
Browser | Type | Most Left | Most Right | Initial |
---|---|---|---|---|
WebKit | default | 0 | 100 | 100 |
Firefox/Opera | negative | -100 | 0 | 0 |
IE/Edge | reverse | 100 | 0 | 0 |
You can install this package with the following command:
npm install normalize-scroll-left
This library exposes these methods:
detectScrollType
type ScrollType = 'indeterminate' | 'default' | 'negative' | 'reverse';
function detectScrollType(): ScrollType;
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 indeterminate
if
it detects a non-browser environment.
import { detectScrollType } from 'normalize-scroll-left';
const type = detectScrollType();
The output is not based on the browser, but feature detection:
Browser | Type |
---|---|
WebKit | default |
Firefox/Opera | negative |
IE/Edge | reverse |
Other/Server | indeterminate |
getNormalizedScrollLeft
function getNormalizedScrollLeft(element: HTMLElement, direction: 'rtl' | 'ltr'): number;
You can use this method to get the normalized scrollLeft
property of an element.
You should explicitly pass the direction for the following reasons:
getComputedStyle
is expensive and might cause a reflow.ltr
.The output is NaN
on the server. Otherwise, it will mimic the behavior of
WebKit
as it's the esiest to work with.
import { getNormalizedScrollLeft } from 'normalize-scroll-left';
const element = document.getElementById('my-scrollable-container');
// element.scrollWidth = 100;
const scrollLeft = getNormalizedScrollLeft(element, 'rtl');
// scrollLeft will always be from 0 (Most Left) to 100 (Most Right).
// It will initially be 100, That means the most right.
setNormalizedScrollLeft
function setNormalizedScrollLeft(
element: HTMLElement,
scrollLeft: number,
direction: 'rtl' | 'ltr',
): void;
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 getNormalizedScrollLeft
:
For scrollWidth = 100
the argument scrollLeft
must be between 0
and 100
. This
function will automatically convert it into something the current browser understands.
import { setNormalizedScrollLeft } from 'normalize-scroll-left';
const element = document.getElementById('my-scrollable-container');
// element.scrollWidth = 100, element.clientWidth = 20;
setNormalizedScrollLeft(element, 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.
FAQs
WebJar for normalize-scroll-left
We found that org.webjars.npm:normalize-scroll-left demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.