wheel scroll over scrollbar triggers scroll on viewport

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -440,6 +440,16 @@ const equalBCRWH = (t, n, o) => equal(t, n, [ "width", "height" ], o && (t => Ma
 
 const noop = () => {};
 
+const selfCancelTimeout = t => {
+  let n;
+  const o = t ? _ : f;
+  const s = t ? h : d;
+  return [ e => {
+    s(n);
+    n = o(e, isFunction(t) ? t() : t);
+  }, () => s(n) ];
+};
+
 const debounce = (t, n) => {
   let o;
   let s;
@@ -770,9 +780,9 @@ const B = `${R}-listener`;
 
 const V = `${B}-scroll`;
 
-const j = `${B}-item`;
+const Y = `${B}-item`;
 
-const Y = `${j}-final`;
+const j = `${Y}-final`;
 
 const q = "os-trinsic-observer";
 
@@ -782,11 +792,11 @@ const G = `${F}-rtl`;
 
 const N = `${F}-horizontal`;
 
-const U = `${F}-vertical`;
+const X = `${F}-vertical`;
 
-const W = `${F}-track`;
+const U = `${F}-track`;
 
-const X = `${F}-handle`;
+const W = `${F}-handle`;
 
 const J = `${F}-visible`;
 
@@ -800,22 +810,24 @@ const tt = `${F}-unusable`;
 
 const nt = `${F}-auto-hidden`;
 
-const ot = `${W}-interactive`;
+const ot = `${F}-wheel`;
 
-const st = `${X}-interactive`;
+const st = `${U}-interactive`;
 
-const et = {};
+const et = `${W}-interactive`;
 
-const getPlugins = () => et;
+const ct = {};
+
+const getPlugins = () => ct;
 
 const addPlugin = t => {
   each(isArray(t) ? t : [ t ], (t => {
     const n = keys(t)[0];
-    et[n] = t[n];
+    ct[n] = t[n];
   }));
 };
 
-const ct = {
+const rt = {
   boolean: "__TPL_boolean_TYPE__",
   number: "__TPL_number_TYPE__",
   string: "__TPL_string_TYPE__",
@@ -825,54 +837,54 @@ const ct = {
   null: "__TPL_null_TYPE__"
 };
 
-const rt = ct.number;
+const lt = rt.number;
 
-const lt = ct.boolean;
+const it = rt.boolean;
 
-const it = [ ct.array, ct.null ];
+const at = [ rt.array, rt.null ];
 
-const at = "hidden scroll visible visible-hidden";
+const ut = "hidden scroll visible visible-hidden";
 
-const ut = "visible hidden auto";
+const dt = "visible hidden auto";
 
-const dt = "never scroll leavemove";
+const ft = "never scroll leavemove";
 
 ({
-  paddingAbsolute: lt,
+  paddingAbsolute: it,
-  showNativeOverlaidScrollbars: lt,
+  showNativeOverlaidScrollbars: it,
   update: {
-    elementEvents: it,
+    elementEvents: at,
-    attributes: it,
+    attributes: at,
-    debounce: [ ct.number, ct.array, ct.null ],
+    debounce: [ rt.number, rt.array, rt.null ],
-    ignoreMutation: [ ct.function, ct.null ]
+    ignoreMutation: [ rt.function, rt.null ]
   },
   overflow: {
-    x: at,
+    x: ut,
-    y: at
+    y: ut
   },
   scrollbars: {
-    theme: [ ct.string, ct.null ],
+    theme: [ rt.string, rt.null ],
-    visibility: ut,
+    visibility: dt,
-    autoHide: dt,
+    autoHide: ft,
-    autoHideDelay: rt,
+    autoHideDelay: lt,
-    dragScroll: lt,
+    dragScroll: it,
-    clickScroll: lt,
+    clickScroll: it,
-    pointers: [ ct.array, ct.null ]
+    pointers: [ rt.array, rt.null ]
   }
 });
 
-const ft = "__osOptionsValidationPlugin";
+const _t = "__osOptionsValidationPlugin";
 
-const _t = 3333333;
+const ht = 3333333;
 
-const ht = "scroll";
+const gt = "scroll";
 
-const gt = "__osSizeObserverPlugin";
+const vt = "__osSizeObserverPlugin";
 
-const vt = {
+const wt = {
-  [gt]: {
+  [vt]: {
     O: (t, n, o) => {
-      const s = createDOM(`<div class="${j}" dir="ltr"><div class="${j}"><div class="${Y}"></div></div><div class="${j}"><div class="${Y}" style="width: 200%; height: 200%"></div></div></div>`);
+      const s = createDOM(`<div class="${Y}" dir="ltr"><div class="${Y}"><div class="${j}"></div></div><div class="${Y}"><div class="${j}" style="width: 200%; height: 200%"></div></div></div>`);
       appendChildren(t, s);
       addClass(t, V);
       const e = s[0];
@@ -884,10 +896,10 @@ const vt = {
       let u = false;
       let _;
       const reset = () => {
-        scrollLeft(r, _t);
+        scrollLeft(r, ht);
-        scrollTop(r, _t);
+        scrollTop(r, ht);
-        scrollLeft(c, _t);
+        scrollLeft(c, ht);
-        scrollTop(c, _t);
+        scrollTop(c, ht);
       };
       const onResized = t => {
         _ = 0;
@@ -910,10 +922,10 @@ const vt = {
         }
         reset();
       };
-      const h = push([], [ on(r, ht, onScroll), on(c, ht, onScroll) ]);
+      const h = push([], [ on(r, gt, onScroll), on(c, gt, onScroll) ]);
       style(l, {
-        width: _t,
+        width: ht,
-        height: _t
+        height: ht
       });
       f(reset);
       return [ o ? onScroll.bind(0, false) : reset, h ];
@@ -921,9 +933,9 @@ const vt = {
   }
 };
 
-let wt = 0;
+let pt = 0;
 
-const {round: pt, abs: bt} = Math;
+const {round: bt, abs: yt} = Math;
 
 const getWindowDPR = () => {
   const t = window.screen.deviceXDPI || 0;
@@ -932,22 +944,22 @@ const getWindowDPR = () => {
 };
 
 const diffBiggerThanOne = (t, n) => {
-  const o = bt(t);
+  const o = yt(t);
-  const s = bt(n);
+  const s = yt(n);
   return !(o === s || o + 1 === s || o - 1 === s);
 };
 
-const yt = "__osScrollbarsHidingPlugin";
+const mt = "__osScrollbarsHidingPlugin";
 
-const mt = {
+const St = {
-  [yt]: {
+  [mt]: {
     A: t => {
       const {T: n, I: o, L: s} = t;
       const e = !s && !n && (o.x || o.y);
       const c = e ? document.createElement("style") : false;
       if (c) {
-        attr(c, "id", `${H}-${wt}`);
+        attr(c, "id", `${H}-${pt}`);
-        wt++;
+        pt++;
       }
       return c;
     },
@@ -1037,12 +1049,12 @@ const mt = {
           return;
         }
         const l = {
-          w: bt(r.w),
+          w: yt(r.w),
-          h: bt(r.h)
+          h: yt(r.h)
         };
         const i = {
-          w: bt(pt(c.w / (t.w / 100))),
+          w: yt(bt(c.w / (t.w / 100))),
-          h: bt(pt(c.h / (t.h / 100)))
+          h: yt(bt(c.h / (t.h / 100)))
         };
         const a = getWindowDPR();
         const u = l.w > 2 && l.h > 2;
@@ -1063,7 +1075,7 @@ const mt = {
   }
 };
 
-let St;
+let xt;
 
 const getNativeScrollbarSize = (t, n, o, s) => {
   appendChildren(t, n);
@@ -1158,8 +1170,8 @@ const createEnvironment = () => {
     L: "-1" === style(o, "zIndex"),
     B: getRtlScrollBehavior(o, s),
     V: getFlexboxGlue(o, s),
-    j: t => e("_", t),
+    Y: t => e("_", t),
-    Y: assignDeep.bind(0, {}, d),
+    j: assignDeep.bind(0, {}, d),
     q(t) {
       assignDeep(d, t);
     },
@@ -1168,14 +1180,14 @@ const createEnvironment = () => {
       assignDeep(f, t);
     },
     N: assignDeep({}, d),
-    U: assignDeep({}, f)
+    X: assignDeep({}, f)
   };
   removeAttr(o, "style");
   removeElements(o);
   if (!a && (!u.x || !u.y)) {
     let t;
     window.addEventListener("resize", (() => {
-      const n = getPlugins()[yt];
+      const n = getPlugins()[mt];
       t = t || n && n.R();
       t && t(_, r, c.bind(0, "_"));
     }));
@@ -1184,10 +1196,10 @@ const createEnvironment = () => {
 };
 
 const getEnvironment = () => {
-  if (!St) {
+  if (!xt) {
-    St = createEnvironment();
+    xt = createEnvironment();
   }
-  return St;
+  return xt;
 };
 
 const resolveInitialization = (t, n) => isFunction(t) ? t.apply(0, n) : t;
@@ -1206,8 +1218,8 @@ const dynamicInitializationElement = (t, n, o, s) => {
 
 const cancelInitialization = (t, n) => {
   const {nativeScrollbarsOverlaid: o, body: s} = t || {};
-  const {W: e} = n;
+  const {U: e} = n;
-  const {Y: c, I: r, T: l} = getEnvironment();
+  const {j: c, I: r, T: l} = getEnvironment();
   const {nativeScrollbarsOverlaid: i, body: a} = c().cancel;
   const u = null != o ? o : i;
   const d = isUndefined(s) ? a : s;
@@ -1216,17 +1228,17 @@ const cancelInitialization = (t, n) => {
   return !!f || !!_;
 };
 
-const xt = new WeakMap;
+const $t = new WeakMap;
 
 const addInstance = (t, n) => {
-  xt.set(t, n);
+  $t.set(t, n);
 };
 
 const removeInstance = t => {
-  xt.delete(t);
+  $t.delete(t);
 };
 
-const getInstance = t => xt.get(t);
+const getInstance = t => $t.get(t);
 
 const getPropByPath = (t, n) => t ? n.split(".").reduce(((t, n) => t && hasOwnProperty(t, n) ? t[n] : void 0), t) : void 0;
 
@@ -1239,9 +1251,9 @@ const createState = t => {
   } ];
 };
 
-const $t = "tabindex";
+const Ct = "tabindex";
 
-const Ct = createDiv.bind(0, "");
+const Ot = createDiv.bind(0, "");
 
 const unwrap = t => {
   appendChildren(parent(t), contents(t));
@@ -1255,8 +1267,8 @@ const addDataAttrHost = (t, n) => {
 
 const createStructureSetupElements = t => {
   const n = getEnvironment();
-  const {Y: o, T: s} = n;
+  const {j: o, T: s} = n;
-  const e = getPlugins()[yt];
+  const e = getPlugins()[mt];
   const c = e && e.A;
   const {elements: r} = o();
   const {host: l, viewport: i, padding: a, content: u} = r;
@@ -1271,23 +1283,23 @@ const createStructureSetupElements = t => {
   const S = y.defaultView;
   const x = staticInitializationElement.bind(0, [ p ]);
   const $ = dynamicInitializationElement.bind(0, [ p ]);
-  const A = x(Ct, i, v);
+  const A = x(Ot, i, v);
   const T = A === p;
   const z = T && m;
   const H = !T && S.top === S && y.activeElement === p;
   const M = {
-    X: p,
+    W: p,
-    J: b ? x(Ct, l, h) : p,
+    J: b ? x(Ot, l, h) : p,
     K: A,
-    Z: !T && $(Ct, a, g),
+    Z: !T && $(Ot, a, g),
-    tt: !T && $(Ct, u, w),
+    tt: !T && $(Ot, u, w),
     nt: !T && !s && c && c(n),
     ot: z ? y.documentElement : A,
     st: z ? y : A,
     et: S,
     ct: y,
     rt: b,
-    W: m,
+    U: m,
     lt: d,
     it: T,
     ut: (t, n) => T ? hasAttrClass(A, C, n) : hasClass(A, t),
@@ -1298,16 +1310,16 @@ const createStructureSetupElements = t => {
     return push(t, o && !parent(o) ? o : false);
   }), []);
   const elementIsGenerated = t => t ? indexOf(R, t) > -1 : null;
-  const {X: k, J: B, Z: V, K: j, tt: Y, nt: q} = M;
+  const {W: k, J: B, Z: V, K: Y, tt: j, nt: q} = M;
   const F = [];
   const G = b && elementIsGenerated(B);
-  let N = b ? k : contents([ Y, j, V, B, k ].find((t => false === elementIsGenerated(t))));
+  let N = b ? k : contents([ j, Y, V, B, k ].find((t => false === elementIsGenerated(t))));
-  const U = Y || j;
+  const X = j || Y;
   const appendElements = () => {
     const t = addDataAttrHost(B, T ? "viewport" : "host");
     const n = addClass(V, I);
-    const o = addClass(j, !T && L);
+    const o = addClass(Y, !T && L);
-    const e = addClass(Y, P);
+    const e = addClass(j, P);
     const c = m ? addClass(parent(p), D) : noop;
     if (G) {
       insertAfter(k, B);
@@ -1316,21 +1328,21 @@ const createStructureSetupElements = t => {
         removeElements(B);
       }));
     }
-    appendChildren(U, N);
+    appendChildren(X, N);
     appendChildren(B, V);
-    appendChildren(V || B, !T && j);
+    appendChildren(V || B, !T && Y);
-    appendChildren(j, Y);
+    appendChildren(Y, j);
     push(F, (() => {
       c();
       t();
-      removeAttr(j, O);
+      removeAttr(Y, O);
-      removeAttr(j, E);
+      removeAttr(Y, E);
-      if (elementIsGenerated(Y)) {
-        unwrap(Y);
-      }
       if (elementIsGenerated(j)) {
         unwrap(j);
       }
+      if (elementIsGenerated(Y)) {
+        unwrap(Y);
+      }
       if (elementIsGenerated(V)) {
         unwrap(V);
       }
@@ -1339,18 +1351,18 @@ const createStructureSetupElements = t => {
       e();
     }));
     if (s && !T) {
-      push(F, removeClass.bind(0, j, D));
+      push(F, removeClass.bind(0, Y, D));
     }
     if (q) {
-      insertBefore(j, q);
+      insertBefore(Y, q);
       push(F, removeElements.bind(0, q));
     }
     if (H) {
-      const t = attr(j, $t);
+      const t = attr(Y, Ct);
-      attr(j, $t, "-1");
+      attr(Y, Ct, "-1");
-      j.focus();
+      Y.focus();
       const n = on(y, "pointerdown keydown", (() => {
-        t ? attr(j, $t, t) : removeAttr(j, $t);
+        t ? attr(Y, Ct, t) : removeAttr(Y, Ct);
         n();
       }));
     }
@@ -1430,17 +1442,17 @@ const createPaddingUpdateSegment = (t, n) => {
   };
 };
 
-const {max: Ot} = Math;
+const {max: Et} = Math;
 
-const Et = Ot.bind(0, 0);
+const At = Et.bind(0, 0);
 
-const At = "visible";
+const Tt = "visible";
 
-const Tt = "hidden";
+const zt = "hidden";
 
-const zt = 42;
+const It = 42;
 
-const It = {
+const Lt = {
   u: equalWH,
   o: {
     w: 0,
@@ -1448,19 +1460,19 @@ const It = {
   }
 };
 
-const Lt = {
+const Ht = {
   u: equalXY,
   o: {
-    x: Tt,
+    x: zt,
-    y: Tt
+    y: zt
   }
 };
 
 const getOverflowAmount = (t, n) => {
   const o = window.devicePixelRatio % 1 !== 0 ? 1 : 0;
   const s = {
-    w: Et(t.w - n.w),
+    w: At(t.w - n.w),
-    h: Et(t.h - n.h)
+    h: At(t.h - n.h)
   };
   return {
     w: s.w > o ? s.w : 0,
@@ -1470,20 +1482,20 @@ const getOverflowAmount = (t, n) => {
 
 const conditionalClass = (t, n, o) => o ? addClass(t, n) : removeClass(t, n);
 
-const overflowIsVisible = t => 0 === t.indexOf(At);
+const overflowIsVisible = t => 0 === t.indexOf(Tt);
 
 const createOverflowUpdateSegment = (t, n) => {
   const [o, s] = n;
-  const {J: e, Z: c, K: r, nt: l, it: i, dt: a, W: u, et: d} = t;
+  const {J: e, Z: c, K: r, nt: l, it: i, dt: a, U: u, et: d} = t;
   const {k: f, V: _, T: h, I: g} = getEnvironment();
-  const v = getPlugins()[yt];
+  const v = getPlugins()[mt];
   const w = !i && !h && (g.x || g.y);
   const p = u && i;
-  const [b, y] = createCache(It, fractionalSize.bind(0, r));
+  const [b, y] = createCache(Lt, fractionalSize.bind(0, r));
-  const [m, S] = createCache(It, scrollSize.bind(0, r));
+  const [m, S] = createCache(Lt, scrollSize.bind(0, r));
-  const [x, $] = createCache(It);
+  const [x, $] = createCache(Lt);
-  const [z, I] = createCache(It);
+  const [z, I] = createCache(Lt);
-  const [L] = createCache(Lt);
+  const [L] = createCache(Ht);
   const fixFlexboxGlue = (t, n) => {
     style(r, {
       height: ""
@@ -1502,7 +1514,7 @@ const createOverflowUpdateSegment = (t, n) => {
     }
   };
   const getViewportOverflowState = (t, n) => {
-    const o = !h && !t ? zt : 0;
+    const o = !h && !t ? It : 0;
     const getStatePerAxis = (t, s, e) => {
       const c = style(r, t);
       const l = n ? n[t] : c;
@@ -1536,7 +1548,7 @@ const createOverflowUpdateSegment = (t, n) => {
   const setViewportOverflowState = (t, n, o, s) => {
     const setAxisOverflowStyle = (t, n) => {
       const o = overflowIsVisible(t);
-      const s = n && o && t.replace(`${At}-`, "") || "";
+      const s = n && o && t.replace(`${Tt}-`, "") || "";
       return [ n && !o ? t : "", overflowIsVisible(s) ? "hidden" : s ];
     };
     const [e, c] = setAxisOverflowStyle(o.x, n.x);
@@ -1568,27 +1580,27 @@ const createOverflowUpdateSegment = (t, n) => {
   return (t, n, l) => {
     const {ht: u, $t: f, gt: v, yt: w, _t: R, wt: k} = t;
     const {ft: B, vt: V} = o();
-    const [j, Y] = n("showNativeOverlaidScrollbars");
+    const [Y, j] = n("showNativeOverlaidScrollbars");
     const [q, F] = n("overflow");
-    const G = j && g.x && g.y;
+    const G = Y && g.x && g.y;
-    const N = !i && !_ && (u || v || f || Y || R);
+    const N = !i && !_ && (u || v || f || j || R);
-    const U = overflowIsVisible(q.x);
+    const X = overflowIsVisible(q.x);
-    const W = overflowIsVisible(q.y);
+    const U = overflowIsVisible(q.y);
-    const X = U || W;
+    const W = X || U;
     let J = y(l);
     let K = S(l);
     let Z = $(l);
     let Q = I(l);
     let tt;
-    if (Y && h) {
+    if (j && h) {
       a(D, T, !G);
     }
     if (N) {
       tt = getViewportOverflowState(G);
       fixFlexboxGlue(tt, B);
     }
-    if (u || w || v || k || Y) {
+    if (u || w || v || k || j) {
-      if (X) {
+      if (W) {
         a(M, A, false);
       }
       const [t, n] = P(G, V, tt);
@@ -1598,17 +1610,17 @@ const createOverflowUpdateSegment = (t, n) => {
       let u = e;
       let f = i;
       t();
-      if ((c || s || Y) && n && !G && H(n, e, o, V)) {
+      if ((c || s || j) && n && !G && H(n, e, o, V)) {
         f = clientSize(r);
         u = scrollSize(r);
       }
       const _ = {
-        w: Et(Ot(e.w, u.w) + o.w),
+        w: At(Et(e.w, u.w) + o.w),
-        h: Et(Ot(e.h, u.h) + o.h)
+        h: At(Et(e.h, u.h) + o.h)
       };
       const h = {
-        w: Et(p ? d.innerWidth : f.w + Et(i.w - e.w) + o.w),
+        w: At(p ? d.innerWidth : f.w + At(i.w - e.w) + o.w),
-        h: Et(p ? d.innerHeight : f.h + Et(i.h - e.h) + o.h)
+        h: At(p ? d.innerHeight : f.h + At(i.h - e.h) + o.h)
       };
       Q = z(h);
       Z = x(getOverflowAmount(_, h), l);
@@ -1621,8 +1633,8 @@ const createOverflowUpdateSegment = (t, n) => {
       x: st.w > 0,
       y: st.h > 0
     };
-    const ut = U && W && (at.x || at.y) || U && at.x && !at.y || W && at.y && !at.x;
+    const ut = X && U && (at.x || at.y) || X && at.x && !at.y || U && at.y && !at.x;
-    if (w || k || it || rt || ot || et || F || Y || N) {
+    if (w || k || it || rt || ot || et || F || j || N) {
       const t = {
         marginRight: 0,
         marginBottom: 0,
@@ -1648,7 +1660,7 @@ const createOverflowUpdateSegment = (t, n) => {
     }
     attrClass(e, C, A, ut);
     conditionalClass(c, M, ut);
-    !i && conditionalClass(r, M, X);
+    !i && conditionalClass(r, M, W);
     const [dt, ft] = L(getViewportOverflowState(G).xt);
     s({
       xt: dt,
@@ -1683,7 +1695,7 @@ const prepareUpdateHints = (t, n, o) => {
 };
 
 const createStructureSetupUpdate = (t, n) => {
-  const {X: o, K: s, dt: e, it: c} = t;
+  const {W: o, K: s, dt: e, it: c} = t;
   const {T: r, I: l, V: i} = getEnvironment();
   const a = !r && (l.x || l.y);
   const u = [ createTrinsicUpdateSegment(t, n), createPaddingUpdateSegment(t, n), createOverflowUpdateSegment(t, n) ];
@@ -1718,13 +1730,13 @@ const createStructureSetupUpdate = (t, n) => {
   };
 };
 
-const Ht = 3333333;
+const Pt = 3333333;
 
 const domRectHasDimensions = t => t && (t.height || t.width);
 
 const createSizeObserver = (t, n, o) => {
   const {It: s = false, Lt: e = false} = o || {};
-  const c = getPlugins()[gt];
+  const c = getPlugins()[vt];
   const {B: r} = getEnvironment();
   const l = createDOM(`<div class="${R}"><div class="${B}"></div></div>`);
   const i = l[0];
@@ -1755,8 +1767,8 @@ const createSizeObserver = (t, n, o) => {
     }
     if (s && a) {
       const n = e ? t[0] : directionIsRTL(i);
-      scrollLeft(i, n ? r.n ? -Ht : r.i ? 0 : Ht : Ht);
+      scrollLeft(i, n ? r.n ? -Pt : r.i ? 0 : Pt : Pt);
-      scrollTop(i, Ht);
+      scrollTop(i, Pt);
     }
     if (!c) {
       n({
@@ -2000,15 +2012,15 @@ const createDOMObserver = (t, n, o, s) => {
   } ];
 };
 
-const Pt = `[${C}]`;
+const Dt = `[${C}]`;
 
-const Dt = `.${L}`;
+const Mt = `.${L}`;
 
-const Mt = [ "tabindex" ];
+const Rt = [ "tabindex" ];
 
-const Rt = [ "wrap", "cols", "rows" ];
+const kt = [ "wrap", "cols", "rows" ];
 
-const kt = [ "id", "class", "style", "open" ];
+const Bt = [ "id", "class", "style", "open" ];
 
 const createStructureSetupObservers = (t, n, o) => {
   let s;
@@ -2044,7 +2056,7 @@ const createStructureSetupObservers = (t, n, o) => {
       h: c.h + e.h + r.h
     };
   }));
-  const w = d ? Rt : kt.concat(Rt);
+  const w = d ? kt : Bt.concat(kt);
   const p = debounce(o, {
     g: () => s,
     v: () => e,
@@ -2058,8 +2070,8 @@ const createStructureSetupObservers = (t, n, o) => {
     }
   });
   const updateViewportAttrsFromHost = t => {
-    each(t || Mt, (t => {
+    each(t || Rt, (t => {
-      if (indexOf(Mt, t) > -1) {
+      if (indexOf(Rt, t) > -1) {
         const n = attr(l, t);
         if (isString(n)) {
           attr(i, t, n);
@@ -2123,8 +2135,8 @@ const createStructureSetupObservers = (t, n, o) => {
     It: true
   }) : [ noop, noop ];
   const [$, C] = createDOMObserver(l, false, onHostMutation, {
-    Dt: kt,
+    Dt: Bt,
-    Pt: kt.concat(Mt)
+    Pt: Bt.concat(Rt)
   });
   const O = f && u && new u(onSizeChanged.bind(0, {
     ht: true
@@ -2171,10 +2183,10 @@ const createStructureSetupObservers = (t, n, o) => {
         Dt: w.concat(o || []),
         Pt: w.concat(o || []),
         Mt: l,
-        Rt: Pt,
+        Rt: Dt,
         Bt: (t, n) => {
           const {target: o, attributeName: s} = t;
-          const e = !n && s && !f ? liesBetween(o, Pt, Dt) : false;
+          const e = !n && s && !f ? liesBetween(o, Dt, Mt) : false;
           return e || !!closest(o, `.${F}`) || !!ignoreMutationFromOptions(t);
         }
       });
@@ -2197,12 +2209,12 @@ const createStructureSetupObservers = (t, n, o) => {
   } ];
 };
 
-const Bt = {
+const Vt = {
   x: 0,
   y: 0
 };
 
-const Vt = {
+const Yt = {
   Z: {
     t: 0,
     r: 0,
@@ -2219,8 +2231,8 @@ const Vt = {
     paddingBottom: 0,
     paddingLeft: 0
   },
-  Ct: Bt,
+  Ct: Vt,
-  Ot: Bt,
+  Ot: Vt,
   xt: {
     x: "hidden",
     y: "hidden"
@@ -2235,7 +2247,7 @@ const Vt = {
 
 const createStructureSetup = (t, n) => {
   const o = createOptionCheck(n, {});
-  const s = createState(Vt);
+  const s = createState(Yt);
   const [e, c, r] = createEventListenerHub();
   const [l] = s;
   const [i, a, u] = createStructureSetupElements(t);
@@ -2253,8 +2265,8 @@ const createStructureSetup = (t, n) => {
   v.Vt = t => {
     e("u", t);
   };
-  v.jt = () => {
+  v.Yt = () => {
-    const {X: t, K: n} = i;
+    const {W: t, K: n} = i;
     const o = scrollLeft(t);
     const s = scrollTop(t);
     _();
@@ -2262,7 +2274,7 @@ const createStructureSetup = (t, n) => {
     scrollLeft(n, o);
     scrollTop(n, s);
   };
-  v.Yt = i;
+  v.jt = i;
   return [ (t, o) => {
     const s = createOptionCheck(n, t, o);
     g(s);
@@ -2338,16 +2350,38 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
   }));
 };
 
-const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r) => {
+const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r, l) => {
-  const {Gt: l} = o;
+  const {Gt: i} = o;
-  return runEachAndClear.bind(0, [ on(l, "pointerenter", (() => {
+  const [a, u] = selfCancelTimeout(500);
+  const d = !!r.scrollBy;
+  let f = true;
+  return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => {
     s(Q, true);
-  })), on(l, "pointerleave pointercancel", (() => {
+  })), on(i, "pointerleave pointercancel", (() => {
     s(Q);
-  })), createRootClickStopPropagationEvents(l, e), createDragScrollingEvents(t, e, o, c, n, r) ]);
+  })), on(i, "wheel", (t => {
+    const {deltaX: n, deltaY: o, deltaMode: e} = t;
+    if (d && f && 0 === e && parent(i) === c) {
+      r.scrollBy({
+        left: n,
+        top: o,
+        behavior: "smooth"
+      });
+    }
+    f = false;
+    s(ot, true);
+    a((() => {
+      f = true;
+      s(ot);
+    }));
+    preventDefault(t);
+  }), {
+    S: false,
+    $: true
+  }), createRootClickStopPropagationEvents(i, e), createDragScrollingEvents(t, e, o, r, n, l), u ]);
 };
 
-const {min: Yt, max: qt, abs: Ft, round: Gt} = Math;
+const {min: qt, max: Ft, abs: Gt, round: Nt} = Math;
 
 const getScrollbarHandleLengthRatio = (t, n, o, s) => {
   if (s) {
@@ -2355,12 +2389,12 @@ const getScrollbarHandleLengthRatio = (t, n, o, s) => {
     const {Ot: n, Ct: e} = s;
     const c = e[t];
     const r = n[t];
-    return qt(0, Yt(1, c / (c + r)));
+    return Ft(0, qt(1, c / (c + r)));
   }
   const e = o ? "w" : "h";
   const c = offsetSize(t)[e];
   const r = offsetSize(n)[e];
-  return qt(0, Yt(1, c / r));
+  return Ft(0, qt(1, c / r));
 };
 
 const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
@@ -2368,21 +2402,21 @@ const getScrollbarHandleOffsetRatio = (t, n, o, s, e, c) => {
   const l = c ? "x" : "y";
   const i = c ? "Left" : "Top";
   const {Ot: a} = s;
-  const u = Gt(a[l]);
+  const u = Nt(a[l]);
-  const d = Ft(o[`scroll${i}`]);
+  const d = Gt(o[`scroll${i}`]);
   const f = c && e;
   const _ = r.i ? d : u - d;
   const h = f ? _ : d;
-  const g = Yt(1, h / u);
+  const g = qt(1, h / u);
   const v = getScrollbarHandleLengthRatio(t, n, c);
   return 1 / v * (1 - v) * g;
 };
 
 const createScrollbarsSetupElements = (t, n, o) => {
-  const {Y: s} = getEnvironment();
+  const {j: s} = getEnvironment();
   const {scrollbars: e} = s();
   const {slot: c} = e;
-  const {ct: r, X: l, J: i, K: a, lt: u, ot: d} = n;
+  const {ct: r, W: l, J: i, K: a, lt: u, ot: d} = n;
   const {scrollbars: f} = u ? {} : t;
   const {slot: h} = f || {};
   const g = dynamicInitializationElement([ l, i, a ], (() => i), c, h);
@@ -2436,22 +2470,22 @@ const createScrollbarsSetupElements = (t, n, o) => {
     scrollbarStructureRefreshHandleOffset(p, t);
   };
   const generateScrollbarDOM = t => {
-    const n = t ? N : U;
+    const n = t ? N : X;
     const s = t ? w : p;
     const e = isEmptyArray(s) ? Z : "";
     const c = createDiv(`${F} ${n} ${e}`);
-    const l = createDiv(W);
+    const l = createDiv(U);
-    const i = createDiv(X);
+    const a = createDiv(W);
-    const a = {
+    const u = {
       Gt: c,
       Ft: l,
-      qt: i
+      qt: a
     };
     appendChildren(c, l);
-    appendChildren(l, i);
+    appendChildren(l, a);
-    push(s, a);
+    push(s, u);
-    push(v, [ removeElements.bind(0, c), o(a, scrollbarsAddRemoveClass, r, d, t) ]);
+    push(v, [ removeElements.bind(0, c), o(u, scrollbarsAddRemoveClass, r, i, d, t) ]);
-    return a;
+    return u;
   };
   const b = generateScrollbarDOM.bind(0, true);
   const y = generateScrollbarDOM.bind(0, false);
@@ -2466,9 +2500,9 @@ const createScrollbarsSetupElements = (t, n, o) => {
   y();
   return [ {
     Nt: refreshScrollbarsHandleLength,
-    Ut: refreshScrollbarsHandleOffset,
+    Xt: refreshScrollbarsHandleOffset,
-    Wt: scrollbarsAddRemoveClass,
+    Ut: scrollbarsAddRemoveClass,
-    Xt: {
+    Wt: {
       Jt: w,
       Kt: b,
       Zt: scrollbarsHandleStyle.bind(0, w)
@@ -2481,16 +2515,6 @@ const createScrollbarsSetupElements = (t, n, o) => {
   }, appendElements, runEachAndClear.bind(0, v) ];
 };
 
-const createSelfCancelTimeout = t => {
-  let n;
-  const o = t ? _ : f;
-  const s = t ? h : d;
-  return [ e => {
-    s(n);
-    n = o(e, isFunction(t) ? t() : t);
-  }, () => s(n) ];
-};
-
 const createScrollbarsSetup = (t, n, o) => {
   let s;
   let e;
@@ -2500,14 +2524,14 @@ const createScrollbarsSetup = (t, n, o) => {
   let i = 0;
   const a = createState({});
   const [u] = a;
-  const [d, f] = createSelfCancelTimeout();
+  const [d, f] = selfCancelTimeout();
-  const [_, h] = createSelfCancelTimeout();
+  const [_, h] = selfCancelTimeout();
-  const [g, v] = createSelfCancelTimeout(100);
+  const [g, v] = selfCancelTimeout(100);
-  const [w, p] = createSelfCancelTimeout(100);
+  const [w, p] = selfCancelTimeout(100);
-  const [b, y] = createSelfCancelTimeout((() => i));
+  const [b, y] = selfCancelTimeout((() => i));
-  const [m, S, x] = createScrollbarsSetupElements(t, o.Yt, createScrollbarsSetupEvents(n, o));
+  const [m, S, x] = createScrollbarsSetupElements(t, o.jt, createScrollbarsSetupEvents(n, o));
-  const {J: $, K: C, ot: O, st: E, it: A, W: T} = o.Yt;
+  const {J: $, K: C, ot: O, st: E, it: A, U: T} = o.jt;
-  const {Xt: z, Qt: I, Wt: L, Nt: H, Ut: P} = m;
+  const {Wt: z, Qt: I, Ut: L, Nt: H, Xt: P} = m;
   const {Zt: D} = z;
   const {Zt: M} = I;
   const styleScrollbarPosition = t => {
@@ -2559,8 +2583,8 @@ const createScrollbarsSetup = (t, n, o) => {
     A && M(styleScrollbarPosition);
   })) ];
   const k = u.bind(0);
-  k.Yt = m;
+  k.jt = m;
-  k.jt = S;
+  k.Yt = S;
   return [ (t, r, a) => {
     const {Tt: u, zt: d, At: f, wt: _} = a;
     const h = createOptionCheck(n, t, r);
@@ -2592,10 +2616,10 @@ const createScrollbarsSetup = (t, n, o) => {
       manageScrollbarsAutoHide(!c, true);
     }
     if (E) {
-      L(st, O);
+      L(et, O);
     }
     if (z) {
-      L(ot, A);
+      L(st, A);
     }
     if (D) {
       const t = setScrollbarVisibility(w.x, true);
@@ -2614,14 +2638,14 @@ const createScrollbarsSetup = (t, n, o) => {
 };
 
 const OverlayScrollbars = (t, n, o) => {
-  const {F: s, j: e} = getEnvironment();
+  const {F: s, Y: e} = getEnvironment();
   const c = getPlugins();
   const r = isHTMLElement(t);
   const l = r ? t : t.target;
   const i = getInstance(l);
   if (n && !i) {
     let i = false;
-    const a = c[ft];
+    const a = c[_t];
     const validateOptions = t => {
       const n = t || {};
       const o = a && a.O;
@@ -2673,8 +2697,8 @@ const OverlayScrollbars = (t, n, o) => {
         });
       },
       elements() {
-        const {X: t, J: n, Z: o, K: s, tt: e, ot: c, st: r} = g.Yt;
+        const {W: t, J: n, Z: o, K: s, tt: e, ot: c, st: r} = g.jt;
-        const {Xt: l, Qt: i} = p.Yt;
+        const {Wt: l, Qt: i} = p.jt;
         const translateScrollbarStructure = t => {
           const {qt: n, Ft: o, Gt: s} = t;
           return {
@@ -2721,12 +2745,12 @@ const OverlayScrollbars = (t, n, o) => {
         n(OverlayScrollbars, m);
       }
     }));
-    if (cancelInitialization(!r && t.cancel, g.Yt)) {
+    if (cancelInitialization(!r && t.cancel, g.jt)) {
       destroy(true);
       return m;
     }
-    g.jt();
+    g.Yt();
-    p.jt();
+    p.Yt();
     addInstance(l, m);
     _("initialized", [ m ]);
     g.Vt(((t, n, o) => {
@@ -2760,7 +2784,7 @@ OverlayScrollbars.valid = t => {
 };
 
 OverlayScrollbars.env = () => {
-  const {k: t, I: n, T: o, B: s, V: e, L: c, N: r, U: l, Y: i, q: a, F: u, G: d} = getEnvironment();
+  const {k: t, I: n, T: o, B: s, V: e, L: c, N: r, X: l, j: i, q: a, F: u, G: d} = getEnvironment();
   return assignDeep({}, {
     scrollbarsSize: t,
     scrollbarsOverlaid: n,
@@ -2777,5 +2801,5 @@ OverlayScrollbars.env = () => {
   });
 };
 
-export { OverlayScrollbars, mt as scrollbarsHidingPlugin, vt as sizeObserverPlugin };
+export { OverlayScrollbars, St as scrollbarsHidingPlugin, wt as sizeObserverPlugin };
 //# sourceMappingURL=overlayscrollbars.esm.js.map

packages/overlayscrollbars/src/classnames.ts

@@ -36,5 +36,6 @@ export const classNamesScrollbarTransitionless = `${classNameScrollbar}-transiti
 export const classNamesScrollbarInteraction = `${classNameScrollbar}-interaction`;
 export const classNamesScrollbarUnusable = `${classNameScrollbar}-unusable`;
 export const classNamesScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`;
+export const classNamesScrollbarWheel = `${classNameScrollbar}-wheel`;
 export const classNamesScrollbarTrackInteractive = `${classNameScrollbarTrack}-interactive`;
 export const classNamesScrollbarHandleInteractive = `${classNameScrollbarHandle}-interactive`;

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts

@@ -203,6 +203,7 @@ export const createScrollbarsSetupElements = (
         result,
         scrollbarsAddRemoveClass,
         _documentElm,
+        _host,
         _scrollOffsetElement,
         isHorizontal
       ),

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts

@@ -7,20 +7,23 @@ import {
   runEachAndClear,
   stopPropagation,
   XY,
+  selfCancelTimeout,
+  parent,
 } from 'support';
-import { classNamesScrollbarInteraction } from 'classnames';
+import { getEnvironment } from 'environment';
+import { classNamesScrollbarInteraction, classNamesScrollbarWheel } from 'classnames';
 import type { ReadonlyOptions } from 'options';
 import type { StructureSetupState } from 'setups';
 import type {
   ScrollbarsSetupElementsObj,
   ScrollbarStructure,
 } from 'setups/scrollbarsSetup/scrollbarsSetup.elements';
-import { getEnvironment } from 'environment';
 
 export type ScrollbarsSetupEvents = (
   scrollbarStructure: ScrollbarStructure,
   scrollbarsAddRemoveClass: ScrollbarsSetupElementsObj['_scrollbarsAddRemoveClass'],
   documentElm: Document,
+  hostElm: HTMLElement,
   scrollOffsetElm: HTMLElement,
   isHorizontal?: boolean
 ) => () => void;
@@ -124,8 +127,18 @@ export const createScrollbarsSetupEvents =
     options: ReadonlyOptions,
     structureSetupState: () => StructureSetupState
   ): ScrollbarsSetupEvents =>
-  (scrollbarStructure, scrollbarsAddRemoveClass, documentElm, scrollOffsetElm, isHorizontal) => {
+  (
+    scrollbarStructure,
+    scrollbarsAddRemoveClass,
+    documentElm,
+    hostElm,
+    scrollOffsetElm,
+    isHorizontal
+  ) => {
     const { _scrollbar } = scrollbarStructure;
+    const [wheelTimeout, clearScrollTimeout] = selfCancelTimeout(500);
+    const scrollByFn = !!scrollOffsetElm.scrollBy;
+    let wheelScrollBy = true;
 
     return runEachAndClear.bind(0, [
       on(_scrollbar, 'pointerenter', () => {
@@ -134,6 +147,31 @@ export const createScrollbarsSetupEvents =
       on(_scrollbar, 'pointerleave pointercancel', () => {
         scrollbarsAddRemoveClass(classNamesScrollbarInteraction);
       }),
+      on(
+        _scrollbar,
+        'wheel',
+        (wheelEvent: WheelEvent) => {
+          const { deltaX, deltaY, deltaMode } = wheelEvent;
+
+          if (scrollByFn && wheelScrollBy && deltaMode === 0 && parent(_scrollbar) === hostElm) {
+            scrollOffsetElm.scrollBy({
+              left: deltaX,
+              top: deltaY,
+              behavior: 'smooth',
+            });
+          }
+
+          wheelScrollBy = false;
+          scrollbarsAddRemoveClass(classNamesScrollbarWheel, true);
+          wheelTimeout(() => {
+            wheelScrollBy = true;
+            scrollbarsAddRemoveClass(classNamesScrollbarWheel);
+          });
+
+          preventDefault(wheelEvent);
+        },
+        { _passive: false, _capture: true }
+      ),
       createRootClickStopPropagationEvents(_scrollbar, documentElm),
       createDragScrollingEvents(
         options,
@@ -143,5 +181,6 @@ export const createScrollbarsSetupEvents =
         structureSetupState,
         isHorizontal
       ),
+      clearScrollTimeout,
     ]);
   };

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts

@@ -1,15 +1,4 @@
-import {
+import { on, runEachAndClear, parent, scrollLeft, scrollTop, selfCancelTimeout } from 'support';
-  rAF,
-  cAF,
-  isFunction,
-  on,
-  runEachAndClear,
-  setT,
-  clearT,
-  parent,
-  scrollLeft,
-  scrollTop,
-} from 'support';
 import { createState, createOptionCheck } from 'setups/setups';
 import { createScrollbarsSetupEvents } from 'setups/scrollbarsSetup/scrollbarsSetup.events';
 import {
@@ -44,20 +33,6 @@ export interface ScrollbarsSetupStaticState {
   _appendElements: () => void;
 }
 
-const createSelfCancelTimeout = (timeout?: number | (() => number)) => {
-  let id: number;
-  const setTFn = timeout ? setT : rAF!;
-  const clearTFn = timeout ? clearT : cAF!;
-  return [
-    (callback: () => any) => {
-      clearTFn(id);
-      // @ts-ignore
-      id = setTFn(callback, isFunction(timeout) ? timeout() : timeout);
-    },
-    () => clearTFn(id),
-  ] as [timeout: (callback: () => any) => void, clear: () => void];
-};
-
 export const createScrollbarsSetup = (
   target: InitializationTarget,
   options: ReadonlyOptions,
@@ -76,11 +51,11 @@ export const createScrollbarsSetup = (
 
   const state = createState({});
   const [getState] = state;
-  const [requestMouseMoveAnimationFrame, cancelMouseMoveAnimationFrame] = createSelfCancelTimeout();
+  const [requestMouseMoveAnimationFrame, cancelMouseMoveAnimationFrame] = selfCancelTimeout();
-  const [requestScrollAnimationFrame, cancelScrollAnimationFrame] = createSelfCancelTimeout();
+  const [requestScrollAnimationFrame, cancelScrollAnimationFrame] = selfCancelTimeout();
-  const [scrollTimeout, clearScrollTimeout] = createSelfCancelTimeout(100);
+  const [scrollTimeout, clearScrollTimeout] = selfCancelTimeout(100);
-  const [auotHideMoveTimeout, clearAutoHideTimeout] = createSelfCancelTimeout(100);
+  const [auotHideMoveTimeout, clearAutoHideTimeout] = selfCancelTimeout(100);
-  const [auotHideTimeout, clearAutoTimeout] = createSelfCancelTimeout(() => globalAutoHideDelay);
+  const [auotHideTimeout, clearAutoTimeout] = selfCancelTimeout(() => globalAutoHideDelay);
   const [elements, appendElements, destroyElements] = createScrollbarsSetupElements(
     target,
     structureSetupState._elements,

packages/overlayscrollbars/src/styles/scrollbars.scss

@@ -58,7 +58,9 @@ body > .os-scrollbar {
   visibility: hidden;
 }
 .os-scrollbar-unusable,
-.os-scrollbar-unusable * {
+.os-scrollbar-unusable *,
+.os-scrollbar-wheel,
+.os-scrollbar-wheel * {
   pointer-events: none !important;
 }
 .os-scrollbar-unusable .os-scrollbar-handle {

packages/overlayscrollbars/src/support/utils/function.ts

@@ -30,6 +30,20 @@ export interface Debounced<FunctionToDebounce extends (...args: any) => any> {
 
 export const noop = () => {}; // eslint-disable-line
 
+export const selfCancelTimeout = (timeout?: number | (() => number)) => {
+  let id: number;
+  const setTFn = timeout ? setT : rAF!;
+  const clearTFn = timeout ? clearT : cAF!;
+  return [
+    (callback: () => any) => {
+      clearTFn(id);
+      // @ts-ignore
+      id = setTFn(callback, isFunction(timeout) ? timeout() : timeout);
+    },
+    () => clearTFn(id),
+  ] as [timeout: (callback: () => any) => void, clear: () => void];
+};
+
 /**
  * Debounces the given function either with a timeout or a animation frame.
  * @param functionToDebounce The function which shall be debounced.

packages/overlayscrollbars/styles/overlayscrollbars.css

@@ -380,7 +380,9 @@ body > .os-scrollbar {
 }
 
 .os-scrollbar-unusable,
-.os-scrollbar-unusable * {
+.os-scrollbar-unusable *,
+.os-scrollbar-wheel,
+.os-scrollbar-wheel * {
   pointer-events: none !important;
 }
 

packages/overlayscrollbars/styles/overlayscrollbars.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../stdin","../../src/styles/sizeobserver.scss","../overlayscrollbars.css","../../src/styles/trinsicobserver.scss","../../src/styles/structure.scss","../../src/styles/scrollbars.scss"],"names":[],"mappings":"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","file":"overlayscrollbars.css"}
+{"version":3,"sources":["../stdin","../../src/styles/sizeobserver.scss","../overlayscrollbars.css","../../src/styles/trinsicobserver.scss","../../src/styles/structure.scss","../../src/styles/scrollbars.scss"],"names":[],"mappings":"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","file":"overlayscrollbars.css"}