UNPKG

2.25 kBJavaScriptView Raw
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.detectScrollType = detectScrollType;
7exports.getNormalizedScrollLeft = getNormalizedScrollLeft;
8// Source from https://github.com/alitaheri/normalize-scroll-left
9var cachedType;
10/**
11 * Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type
12 *
13 * Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.
14 *
15 * Type | <- Most Left | Most Right -> | Initial
16 * ---------------- | ------------ | ------------- | -------
17 * default | 0 | 100 | 100
18 * negative (spec*) | -100 | 0 | 0
19 * reverse | 100 | 0 | 0
20 *
21 * Edge 85: default
22 * Safari 14: negative
23 * Chrome 85: negative
24 * Firefox 81: negative
25 * IE 11: reverse
26 *
27 * spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll
28 */
29
30function detectScrollType() {
31 if (cachedType) {
32 return cachedType;
33 }
34
35 var dummy = document.createElement('div');
36 var container = document.createElement('div');
37 container.style.width = '10px';
38 container.style.height = '1px';
39 dummy.appendChild(container);
40 dummy.dir = 'rtl';
41 dummy.style.fontSize = '14px';
42 dummy.style.width = '4px';
43 dummy.style.height = '1px';
44 dummy.style.position = 'absolute';
45 dummy.style.top = '-1000px';
46 dummy.style.overflow = 'scroll';
47 document.body.appendChild(dummy);
48 cachedType = 'reverse';
49
50 if (dummy.scrollLeft > 0) {
51 cachedType = 'default';
52 } else {
53 dummy.scrollLeft = 1;
54
55 if (dummy.scrollLeft === 0) {
56 cachedType = 'negative';
57 }
58 }
59
60 document.body.removeChild(dummy);
61 return cachedType;
62} // Based on https://stackoverflow.com/a/24394376
63
64
65function getNormalizedScrollLeft(element, direction) {
66 var scrollLeft = element.scrollLeft; // Perform the calculations only when direction is rtl to avoid messing up the ltr bahavior
67
68 if (direction !== 'rtl') {
69 return scrollLeft;
70 }
71
72 var type = detectScrollType();
73
74 switch (type) {
75 case 'negative':
76 return element.scrollWidth - element.clientWidth + scrollLeft;
77
78 case 'reverse':
79 return element.scrollWidth - element.clientWidth - scrollLeft;
80
81 default:
82 return scrollLeft;
83 }
84}
\No newline at end of file