normalize-scroll-left

import { detectScrollType, getNormalizedScrollLeft, setNormalizedScrollLeft } from 'normalize-scroll-left'; // This quickstart demonstrates how to use normalize-scroll-left to handle // inconsistent Element.scrollLeft behavior in RTL layouts across browsers. // 1. Detect the browser's scroll type (caches result) // Must be called after the DOM body is loaded. const scrollType = detectScrollType(); console.log(`Detected scroll type: ${scrollType}`); // e.g., 'default', 'negative', 'reverse', 'indeterminate' in SSR // 2. Create a dummy scrollable element for demonstration const container = document.createElement('div'); container.id = 'my-scrollable-container'; container.style.direction = 'rtl'; container.style.width = '100px'; container.style.overflowX = 'scroll'; container.style.whiteSpace = 'nowrap'; container.style.border = '1px solid black'; container.innerHTML = '<span style="display:inline-block; width:200px; height:20px;">Scrollable Content</span>'; document.body.appendChild(container); // Simulate scrolling to the most right (normalized to 100) setNormalizedScrollLeft(container, 100, 'rtl'); console.log(`After setting normalized scrollLeft to 100 (most right): ${getNormalizedScrollLeft(container, 'rtl')}`); // Simulate scrolling to a specific position (normalized to 20) setNormalizedScrollLeft(container, 20, 'rtl'); console.log(`After setting normalized scrollLeft to 20: ${getNormalizedScrollLeft(container, 'rtl')}`); // Clean up document.body.removeChild(container);