optimization and build

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -333,8 +333,29 @@ const createDOM = (html) => {
 };
 
 const firstLetterToUpper = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const getDummyStyle = () => createDiv().style;
+
+const cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
 const jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
 const jsCache = {};
+const cssCache = {};
+const cssProperty = (name) => {
+  let result = cssCache[name];
+
+  if (hasOwnProperty$1(cssCache, name)) {
+    return result;
+  }
+
+  const uppercasedName = firstLetterToUpper(name);
+  const elmStyle = getDummyStyle();
+  each(cssPrefixes, (prefix) => {
+    const prefixWithoutDashes = prefix.replace(/-/g, '');
+    const resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
+    return !(result = resultPossibilities.find((resultPossibility) => elmStyle[resultPossibility] !== undefined));
+  });
+  return (cssCache[name] = result || '');
+};
 const jsAPI = (name) => {
   let result = jsCache[name] || window[name];
 
@@ -797,6 +818,9 @@ const defaultOptionsWithTemplate = {
     show: booleanFalseTemplate,
     initialize: booleanFalseTemplate,
   },
+  callbacks: {
+    onUpdated: [null, [optionsTemplateTypes.function, optionsTemplateTypes.null]],
+  },
 };
 const { _template: optionsTemplate, _options: defaultOptions } = transformOptions(defaultOptionsWithTemplate);
 
@@ -819,6 +843,19 @@ const getNativeScrollbarSize = (body, measureElm) => {
   };
 };
 
+const getNativeScrollbarStyling = (testElm) => {
+  let result = false;
+  addClass(testElm, classNameViewportScrollbarStyling);
+
+  try {
+    result =
+      style(testElm, cssProperty('scrollbar-width')) === 'none' ||
+      window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
+  } catch (ex) {}
+
+  return result;
+};
+
 const getRtlScrollBehavior = (parentElm, childElm) => {
   const strHidden = 'hidden';
   style(parentElm, {
@@ -867,7 +904,7 @@ const createEnvironment = () => {
   const envChildElm = envElm.firstChild;
   const onChangedListener = new Set();
   const nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
-  const nativeScrollbarStyling = false;
+  const nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
   const nativeScrollbarIsOverlaid = {
     x: nativeScrollbarSize.x === 0,
     y: nativeScrollbarSize.y === 0,
@@ -909,7 +946,7 @@ const createEnvironment = () => {
   removeAttr(envElm, 'style');
   removeElements(envElm);
 
-  if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
+  if (!nativeScrollbarStyling && (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y)) {
     let size = windowSize();
     let dpr = getWindowDPR();
     let scrollbarSize = nativeScrollbarSize;
@@ -1141,58 +1178,48 @@ const createPaddingLifecycle = (lifecycleHub) => {
   const { _host, _padding, _viewport } = _structureSetup._targetObj;
   const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
     _equal: equalTRBL,
+    _initialValue: topRightBottomLeft(),
   });
   return (updateHints, checkOption, force) => {
     let { _value: padding, _changed: paddingChanged } = currentPaddingCache(force);
-    const { _nativeScrollbarStyling } = getEnvironment();
+    const { _nativeScrollbarStyling, _flexboxGlue } = getEnvironment();
-    const { _sizeChanged, _directionIsRTL } = updateHints;
+    const { _sizeChanged, _directionIsRTL, _contentMutation } = updateHints;
     const { _value: directionIsRTL, _changed: directionChanged } = _directionIsRTL;
     const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = checkOption('paddingAbsolute');
+    const contentMutation = !_flexboxGlue && _contentMutation;
 
-    if (_sizeChanged || paddingChanged) {
+    if (_sizeChanged || paddingChanged || contentMutation) {
       ({ _value: padding, _changed: paddingChanged } = updatePaddingCache(force));
     }
 
     const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
 
     if (paddingStyleChanged) {
-      const { _value: _padding2 } = updatePaddingCache(force);
       const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
-      const paddingHorizontal = _padding2.r + _padding2.l;
+      const paddingHorizontal = padding.r + padding.l;
-      const paddingVertical = _padding2.t + _padding2.b;
+      const paddingVertical = padding.t + padding.b;
       const paddingStyle = {
-        marginTop: 0,
+        marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
-        marginRight: 0,
         marginBottom: paddingRelative ? -paddingVertical : 0,
-        marginLeft: 0,
+        marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
-        top: paddingRelative ? -_padding2.t : 0,
+        top: paddingRelative ? -padding.t : 0,
-        right: 0,
+        right: paddingRelative ? (directionIsRTL ? -padding.r : 'auto') : 0,
-        bottom: 0,
+        left: paddingRelative ? (directionIsRTL ? 'auto' : -padding.l) : 0,
-        left: 0,
+        width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
-        maxWidth: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
       };
       const viewportStyle = {
-        paddingTop: paddingRelative ? _padding2.t : 0,
+        paddingTop: paddingRelative ? padding.t : 0,
-        paddingRight: paddingRelative ? _padding2.r : 0,
+        paddingRight: paddingRelative ? padding.r : 0,
-        paddingBottom: paddingRelative ? _padding2.b : 0,
+        paddingBottom: paddingRelative ? padding.b : 0,
-        paddingLeft: paddingRelative ? _padding2.l : 0,
+        paddingLeft: paddingRelative ? padding.l : 0,
       };
-
-      if (paddingRelative) {
-        const horizontalPositionKey = directionIsRTL ? 'right' : 'left';
-        const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
-        const horizontalPositionValue = directionIsRTL ? _padding2.r : _padding2.l;
-        paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
-        paddingStyle[horizontalMarginKey] = -paddingHorizontal;
-      }
-
       style(_padding || _viewport, paddingStyle);
       style(_viewport, viewportStyle);
 
       _setLifecycleCommunication({
         _paddingInfo: {
           _absolute: !paddingRelative,
-          _padding: _padding2,
+          _padding: padding,
         },
         _viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
       });
@@ -1204,35 +1231,65 @@ const createPaddingLifecycle = (lifecycleHub) => {
   };
 };
 
+const { max, abs: abs$1, round: round$1 } = Math;
 const overlaidScrollbarsHideOffset = 42;
+const whCacheOptions = {
+  _equal: equalWH,
+  _initialValue: {
+    w: 0,
+    h: 0,
+  },
+};
+
+const sizeFraction = (elm) => {
+  const viewportOffsetSize = offsetSize(elm);
+  const viewportRect = getBoundingClientRect(elm);
+  return {
+    w: viewportRect.width - viewportOffsetSize.w,
+    h: viewportRect.height - viewportOffsetSize.h,
+  };
+};
+
+const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) => {
+  const overflowKey = horizontal ? 'overflowX' : 'overflowY';
+  const behaviorIsVisible = behavior.indexOf('visible') === 0;
+  const behaviorIsVisibleHidden = behavior === 'visible-hidden';
+  const behaviorIsScroll = behavior === 'scroll';
+  const hasOverflow = overflowAmount > 0;
+
+  if (behaviorIsVisible) {
+    styleObj[overflowKey] = 'visible';
+  }
+
+  if (behaviorIsScroll && hasOverflow) {
+    styleObj[overflowKey] = behavior;
+  }
+
+  return {
+    _visible: behaviorIsVisible,
+    _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
+  };
+};
+
 const createOverflowLifecycle = (lifecycleHub) => {
   const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub;
   const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
-  const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache(
+  const { _update: updateViewportSizeFraction, _current: getCurrentViewportSizeFraction } = createCache(
-    (ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect),
+    () => sizeFraction(_viewport),
-    {
+    whCacheOptions
-      _equal: equalWH,
+  );
-    }
+  const { _update: updateViewportScrollSizeCache, _current: getCurrentViewportScrollSizeCache } = createCache(
+    () => scrollSize(_viewport),
+    whCacheOptions
   );
   const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache(
-    (ctx) => ({
+    ({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
-      w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
+      w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
-      h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
+      h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
     }),
-    {
+    whCacheOptions
-      _equal: equalWH,
-      _initialValue: {
-        w: 0,
-        h: 0,
-      },
-    }
   );
 
-  const fixScrollSizeRounding = (viewportScrollSize, viewportOffsetSize, viewportRect) => ({
-    w: viewportScrollSize.w - Math.round(Math.max(0, viewportRect.width - viewportOffsetSize.w)),
-    h: viewportScrollSize.h - Math.round(Math.max(0, viewportRect.height - viewportOffsetSize.h)),
-  });
-
   const fixFlexboxGlue = (viewportOverflowState, heightIntrinsic) => {
     style(_viewport, {
       height: '',
@@ -1242,13 +1299,12 @@ const createOverflowLifecycle = (lifecycleHub) => {
       const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
 
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
-      const hostBCR = getBoundingClientRect(_host);
+      const hostSizeFraction = sizeFraction(_host);
-      const hostOffsetSize = offsetSize(_host);
       const hostClientSize = clientSize(_host);
       const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
-      const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
+      const fractionalcleintHeight = hostClientSize.h + (abs$1(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
       style(_viewport, {
-        height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
+        height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
       });
     }
   };
@@ -1278,28 +1334,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
   };
 
   const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
-    const setPartialStylePerAxis = (horizontal, overflowAmount, behavior, styleObj) => {
+    const { _visible: xVisible, _behavior: xVisibleBehavior } = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj);
-      const overflowKey = horizontal ? 'overflowX' : 'overflowY';
+    const { _visible: yVisible, _behavior: yVisibleBehavior } = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj);
-      const behaviorIsVisible = behavior.indexOf('visible') === 0;
-      const behaviorIsVisibleHidden = behavior === 'visible-hidden';
-      const behaviorIsScroll = behavior === 'scroll';
-
-      if (behaviorIsVisible) {
-        styleObj[overflowKey] = 'visible';
-      }
-
-      if (behaviorIsScroll && overflowAmount > 0) {
-        styleObj[overflowKey] = behavior;
-      }
-
-      return {
-        _visible: behaviorIsVisible,
-        _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
-      };
-    };
-
-    const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj);
-    const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj);
 
     if (xVisible && !yVisible) {
       viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1312,7 +1348,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
     return getViewportOverflowState(showNativeOverlaidScrollbars, viewportStyleObj);
   };
 
-  const arrangeViewport = (viewportOverflowState, contentScrollSize, directionIsRTL) => {
+  const arrangeViewport = (viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) => {
     if (_doViewportArrange) {
       const { _scrollbarsHideOffset, _scrollbarsHideOffsetArrange } = viewportOverflowState;
       const { x: arrangeX, y: arrangeY } = _scrollbarsHideOffsetArrange;
@@ -1323,9 +1359,11 @@ const createOverflowLifecycle = (lifecycleHub) => {
       const viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
       const viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
       const viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
+      const fractionalContentWidth = viewportScrollSize.w + (abs$1(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
+      const fractionalContenHeight = viewportScrollSize.h + (abs$1(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
       const arrangeSize = {
-        w: hideOffsetY && arrangeY ? `${hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue}px` : '',
+        w: hideOffsetY && arrangeY ? `${hideOffsetY + fractionalContentWidth - viewportArrangeHorizontalPaddingValue}px` : '',
-        h: hideOffsetX && arrangeX ? `${hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue}px` : '',
+        h: hideOffsetX && arrangeX ? `${hideOffsetX + fractionalContenHeight - viewportArrangeVerticalPaddingValue}px` : '',
       };
 
       if (_viewportArrange) {
@@ -1346,8 +1384,8 @@ const createOverflowLifecycle = (lifecycleHub) => {
         }
       } else {
         style(_viewport, {
-          '--viewport-arrange-width': arrangeSize.w,
+          '--os-vaw': arrangeSize.w,
-          '--viewport-arrange-height': arrangeSize.h,
+          '--os-vah': arrangeSize.h,
         });
       }
     }
@@ -1368,7 +1406,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
     const verticalMarginValue = viewportPaddingStyle.marginBottom;
     const horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
     const verticalPaddingValue = viewportPaddingStyle.paddingBottom;
-    viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
+    viewportStyleObj.width = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
     viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
     viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
 
@@ -1399,7 +1437,7 @@ const createOverflowLifecycle = (lifecycleHub) => {
       }
 
       if (arrangeX) {
-        assignProps('marginTop marginBottom paddingTop paddingBottom');
+        assignProps('marginBottom paddingTop paddingBottom');
       }
 
       if (arrangeY) {
@@ -1435,8 +1473,9 @@ const createOverflowLifecycle = (lifecycleHub) => {
     const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
     const adjustFlexboxGlue =
       !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
+    let viewportSizeFractionCache = getCurrentViewportSizeFraction(force);
+    let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
     let overflowAmuntCache = getCurrentOverflowAmountCache(force);
-    let contentScrollSizeCache = getCurrentContentScrollSizeCache(force);
     let preMeasureViewportOverflowState;
 
     if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -1458,48 +1497,48 @@ const createOverflowLifecycle = (lifecycleHub) => {
         directionIsRTL,
         preMeasureViewportOverflowState
       );
-      const contentSize = clientSize(_viewport);
+      const { _value: _viewportSizeFraction2, _changed: viewportSizeFractionCahnged } = (viewportSizeFractionCache = updateViewportSizeFraction(
-      const viewportRect = getBoundingClientRect(_viewport);
+        force
-      const viewportOffsetSize = offsetSize(_viewport);
+      ));
-      let viewportScrollSize = scrollSize(_viewport);
+      const { _value: _viewportScrollSize2, _changed: _viewportScrollSizeChanged } = (viewportScrollSizeCache = updateViewportScrollSizeCache(force));
-      let viewportClientSize = contentSize;
+      const viewportContentSize = clientSize(_viewport);
-      const { _value: _contentScrollSize, _changed: _contentScrollSizeChanged } = (contentScrollSizeCache = updateContentScrollSizeCache(force, {
+      let arrangedViewportScrollSize = _viewportScrollSize2;
-        _viewportRect: viewportRect,
+      let arrangedViewportClientSize = viewportContentSize;
-        _viewportOffsetSize: viewportOffsetSize,
-        _viewportScrollSize: viewportScrollSize,
-      }));
 
       _redoViewportArrange();
 
       if (
-        (_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
+        (_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) &&
         undoViewportArrangeOverflowState &&
         !showNativeOverlaidScrollbars &&
-        arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
+        arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize2, _viewportSizeFraction2, directionIsRTL)
       ) {
-        viewportClientSize = clientSize(_viewport);
+        arrangedViewportClientSize = clientSize(_viewport);
-        viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
+        arrangedViewportScrollSize = scrollSize(_viewport);
       }
 
       overflowAmuntCache = updateOverflowAmountCache(force, {
-        _contentScrollSize: {
+        _viewportSizeFraction: _viewportSizeFraction2,
-          w: Math.max(_contentScrollSize.w, viewportScrollSize.w),
+        _viewportScrollSize: {
-          h: Math.max(_contentScrollSize.h, viewportScrollSize.h),
+          w: max(_viewportScrollSize2.w, arrangedViewportScrollSize.w),
+          h: max(_viewportScrollSize2.h, arrangedViewportScrollSize.h),
         },
-        _viewportSize: {
+        _viewportClientSize: {
-          w: viewportClientSize.w + Math.max(0, contentSize.w - _contentScrollSize.w),
+          w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize2.w),
-          h: viewportClientSize.h + Math.max(0, contentSize.h - _contentScrollSize.h),
+          h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize2.h),
         },
       });
     }
 
-    const { _value: overflow, _changed: overflowChanged } = checkOption('overflow');
+    const { _value: viewportSizeFraction, _changed: viewportSizeFractionChanged } = viewportSizeFractionCache;
-    const { _value: contentScrollSize, _changed: contentScrollSizeChanged } = contentScrollSizeCache;
+    const { _value: viewportScrollSize, _changed: viewportScrollSizeChanged } = viewportScrollSizeCache;
     const { _value: overflowAmount, _changed: overflowAmountChanged } = overflowAmuntCache;
+    const { _value: overflow, _changed: overflowChanged } = checkOption('overflow');
 
     if (
       _paddingStyleChanged ||
-      contentScrollSizeChanged ||
+      viewportSizeFractionChanged ||
+      viewportScrollSizeChanged ||
       overflowAmountChanged ||
       overflowChanged ||
       showNativeOverlaidScrollbarsChanged ||
@@ -1507,16 +1546,15 @@ const createOverflowLifecycle = (lifecycleHub) => {
       adjustFlexboxGlue
     ) {
       const viewportStyle = {
-        marginTop: 0,
         marginRight: 0,
         marginBottom: 0,
         marginLeft: 0,
-        maxWidth: '',
+        width: '',
         overflowY: '',
         overflowX: '',
       };
       const viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyle);
-      const viewportArranged = arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL);
+      const viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL);
       hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArranged, viewportStyle);
 
       if (adjustFlexboxGlue) {
@@ -1940,13 +1978,6 @@ const createDOMObserver = (target, isContentObserver, callback, options) => {
 const getPropByPath = (obj, path) =>
   obj ? path.split('.').reduce((o, prop) => (o && hasOwnProperty$1(o, prop) ? o[prop] : undefined), obj) : undefined;
 
-const emptyStylePropsToZero = (stlyeObj, baseStyle) =>
-  keys(stlyeObj).reduce((obj, key) => {
-    const value = stlyeObj[key];
-    obj[key] = value === '' ? 0 : value;
-    return obj;
-  }, _extends_1({}, baseStyle));
-
 const ignorePrefix = 'os-';
 const hostSelector = `.${classNameHost}`;
 const viewportSelector = `.${classNameViewport}`;
@@ -1991,7 +2022,6 @@ const lifecycleCommunicationFallback = {
     h: 0,
   },
   _viewportPaddingStyle: {
-    marginTop: 0,
     marginRight: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -2012,7 +2042,6 @@ const createLifecycleHub = (options, structureSetup) => {
     _removeListener: removeEnvironmentListener,
   } = getEnvironment();
   const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
-  const lifecycles = [];
   const instance = {
     _options: options,
     _structureSetup: structureSetup,
@@ -2020,19 +2049,10 @@ const createLifecycleHub = (options, structureSetup) => {
     _getLifecycleCommunication: () => lifecycleCommunication,
 
     _setLifecycleCommunication(newLifecycleCommunication) {
-      if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
-        newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
-          newLifecycleCommunication._viewportPaddingStyle,
-          lifecycleCommunicationFallback._viewportPaddingStyle
-        );
-      }
-
       lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
     },
   };
-  push(lifecycles, createTrinsicLifecycle(instance));
+  const lifecycles = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
-  push(lifecycles, createPaddingLifecycle(instance));
-  push(lifecycles, createOverflowLifecycle(instance));
 
   const updateLifecycles = (updateHints, changedOptions, force) => {
     let {
@@ -2088,6 +2108,10 @@ const createLifecycleHub = (options, structureSetup) => {
     if (isNumber(scrollOffsetY)) {
       scrollTop(_viewport, scrollOffsetY);
     }
+
+    if (options.callbacks.onUpdated) {
+      options.callbacks.onUpdated();
+    }
   };
 
   const onSizeChanged = (directionIsRTL) => {

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -374,8 +374,33 @@
   var firstLetterToUpper = function firstLetterToUpper(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
   };
+
+  var getDummyStyle = function getDummyStyle() {
+    return createDiv().style;
+  };
+
+  var cssPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-'];
   var jsPrefixes = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];
   var jsCache = {};
+  var cssCache = {};
+  var cssProperty = function cssProperty(name) {
+    var result = cssCache[name];
+
+    if (hasOwnProperty$1(cssCache, name)) {
+      return result;
+    }
+
+    var uppercasedName = firstLetterToUpper(name);
+    var elmStyle = getDummyStyle();
+    each(cssPrefixes, function (prefix) {
+      var prefixWithoutDashes = prefix.replace(/-/g, '');
+      var resultPossibilities = [name, prefix + name, prefixWithoutDashes + uppercasedName, firstLetterToUpper(prefixWithoutDashes) + uppercasedName];
+      return !(result = resultPossibilities.find(function (resultPossibility) {
+        return elmStyle[resultPossibility] !== undefined;
+      }));
+    });
+    return (cssCache[name] = result || '');
+  };
   var jsAPI = function jsAPI(name) {
     var result = jsCache[name] || window[name];
 
@@ -887,6 +912,9 @@
       show: booleanFalseTemplate,
       initialize: booleanFalseTemplate,
     },
+    callbacks: {
+      onUpdated: [null, [optionsTemplateTypes.function, optionsTemplateTypes.null]],
+    },
   };
 
   var _transformOptions = transformOptions(defaultOptionsWithTemplate),
@@ -913,6 +941,19 @@
     };
   };
 
+  var getNativeScrollbarStyling = function getNativeScrollbarStyling(testElm) {
+    var result = false;
+    addClass(testElm, classNameViewportScrollbarStyling);
+
+    try {
+      result =
+        style(testElm, cssProperty('scrollbar-width')) === 'none' ||
+        window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
+    } catch (ex) {}
+
+    return result;
+  };
+
   var getRtlScrollBehavior = function getRtlScrollBehavior(parentElm, childElm) {
     var strHidden = 'hidden';
     style(parentElm, {
@@ -964,7 +1005,7 @@
     var envChildElm = envElm.firstChild;
     var onChangedListener = new Set();
     var nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
-    var nativeScrollbarStyling = false;
+    var nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
     var nativeScrollbarIsOverlaid = {
       x: nativeScrollbarSize.x === 0,
       y: nativeScrollbarSize.y === 0,
@@ -1003,7 +1044,7 @@
     removeAttr(envElm, 'style');
     removeElements(envElm);
 
-    if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {
+    if (!nativeScrollbarStyling && (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y)) {
       var size = windowSize();
       var dpr = getWindowDPR();
       var scrollbarSize = nativeScrollbarSize;
@@ -1258,6 +1299,7 @@
         },
         {
           _equal: equalTRBL,
+          _initialValue: topRightBottomLeft(),
         }
       ),
       updatePaddingCache = _createCache._update,
@@ -1269,10 +1311,12 @@
         paddingChanged = _currentPaddingCache._changed;
 
       var _getEnvironment = getEnvironment(),
-        _nativeScrollbarStyling = _getEnvironment._nativeScrollbarStyling;
+        _nativeScrollbarStyling = _getEnvironment._nativeScrollbarStyling,
+        _flexboxGlue = _getEnvironment._flexboxGlue;
 
       var _sizeChanged = updateHints._sizeChanged,
-        _directionIsRTL = updateHints._directionIsRTL;
+        _directionIsRTL = updateHints._directionIsRTL,
+        _contentMutation = updateHints._contentMutation;
       var directionIsRTL = _directionIsRTL._value,
         directionChanged = _directionIsRTL._changed;
 
@@ -1280,7 +1324,9 @@
         paddingAbsolute = _checkOption._value,
         paddingAbsoluteChanged = _checkOption._changed;
 
-      if (_sizeChanged || paddingChanged) {
+      var contentMutation = !_flexboxGlue && _contentMutation;
+
+      if (_sizeChanged || paddingChanged || contentMutation) {
         var _updatePaddingCache = updatePaddingCache(force);
 
         padding = _updatePaddingCache._value;
@@ -1290,45 +1336,31 @@
       var paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
 
       if (paddingStyleChanged) {
-        var _updatePaddingCache2 = updatePaddingCache(force),
-          _padding2 = _updatePaddingCache2._value;
-
         var paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
-        var paddingHorizontal = _padding2.r + _padding2.l;
+        var paddingHorizontal = padding.r + padding.l;
-        var paddingVertical = _padding2.t + _padding2.b;
+        var paddingVertical = padding.t + padding.b;
         var paddingStyle = {
-          marginTop: 0,
+          marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
-          marginRight: 0,
           marginBottom: paddingRelative ? -paddingVertical : 0,
-          marginLeft: 0,
+          marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
-          top: paddingRelative ? -_padding2.t : 0,
+          top: paddingRelative ? -padding.t : 0,
-          right: 0,
+          right: paddingRelative ? (directionIsRTL ? -padding.r : 'auto') : 0,
-          bottom: 0,
+          left: paddingRelative ? (directionIsRTL ? 'auto' : -padding.l) : 0,
-          left: 0,
+          width: paddingRelative ? 'calc(100% + ' + paddingHorizontal + 'px)' : '',
-          maxWidth: paddingRelative ? 'calc(100% + ' + paddingHorizontal + 'px)' : '',
         };
         var viewportStyle = {
-          paddingTop: paddingRelative ? _padding2.t : 0,
+          paddingTop: paddingRelative ? padding.t : 0,
-          paddingRight: paddingRelative ? _padding2.r : 0,
+          paddingRight: paddingRelative ? padding.r : 0,
-          paddingBottom: paddingRelative ? _padding2.b : 0,
+          paddingBottom: paddingRelative ? padding.b : 0,
-          paddingLeft: paddingRelative ? _padding2.l : 0,
+          paddingLeft: paddingRelative ? padding.l : 0,
         };
-
-        if (paddingRelative) {
-          var horizontalPositionKey = directionIsRTL ? 'right' : 'left';
-          var horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
-          var horizontalPositionValue = directionIsRTL ? _padding2.r : _padding2.l;
-          paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
-          paddingStyle[horizontalMarginKey] = -paddingHorizontal;
-        }
-
         style(_padding || _viewport, paddingStyle);
         style(_viewport, viewportStyle);
 
         _setLifecycleCommunication({
           _paddingInfo: {
             _absolute: !paddingRelative,
-            _padding: _padding2,
+            _padding: padding,
           },
           _viewportPaddingStyle: _padding ? viewportStyle : _extends_1({}, paddingStyle, viewportStyle),
         });
@@ -1340,7 +1372,48 @@
     };
   };
 
+  var max = Math.max,
+    abs$1 = Math.abs,
+    round$1 = Math.round;
   var overlaidScrollbarsHideOffset = 42;
+  var whCacheOptions = {
+    _equal: equalWH,
+    _initialValue: {
+      w: 0,
+      h: 0,
+    },
+  };
+
+  var sizeFraction = function sizeFraction(elm) {
+    var viewportOffsetSize = offsetSize(elm);
+    var viewportRect = getBoundingClientRect(elm);
+    return {
+      w: viewportRect.width - viewportOffsetSize.w,
+      h: viewportRect.height - viewportOffsetSize.h,
+    };
+  };
+
+  var setAxisOverflowStyle = function setAxisOverflowStyle(horizontal, overflowAmount, behavior, styleObj) {
+    var overflowKey = horizontal ? 'overflowX' : 'overflowY';
+    var behaviorIsVisible = behavior.indexOf('visible') === 0;
+    var behaviorIsVisibleHidden = behavior === 'visible-hidden';
+    var behaviorIsScroll = behavior === 'scroll';
+    var hasOverflow = overflowAmount > 0;
+
+    if (behaviorIsVisible) {
+      styleObj[overflowKey] = 'visible';
+    }
+
+    if (behaviorIsScroll && hasOverflow) {
+      styleObj[overflowKey] = behavior;
+    }
+
+    return {
+      _visible: behaviorIsVisible,
+      _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
+    };
+  };
+
   var createOverflowLifecycle = function createOverflowLifecycle(lifecycleHub) {
     var _structureSetup = lifecycleHub._structureSetup,
       _doViewportArrange = lifecycleHub._doViewportArrange,
@@ -1351,41 +1424,29 @@
       _viewport = _structureSetup$_targ._viewport,
       _viewportArrange = _structureSetup$_targ._viewportArrange;
 
-    var _createCache = createCache(
+    var _createCache = createCache(function () {
-        function (ctx) {
+        return sizeFraction(_viewport);
-          return fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect);
+      }, whCacheOptions),
-        },
+      updateViewportSizeFraction = _createCache._update,
-        {
+      getCurrentViewportSizeFraction = _createCache._current;
-          _equal: equalWH,
-        }
-      ),
-      updateContentScrollSizeCache = _createCache._update,
-      getCurrentContentScrollSizeCache = _createCache._current;
 
-    var _createCache2 = createCache(
+    var _createCache2 = createCache(function () {
-        function (ctx) {
+        return scrollSize(_viewport);
-          return {
+      }, whCacheOptions),
-            w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
+      updateViewportScrollSizeCache = _createCache2._update,
-            h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
+      getCurrentViewportScrollSizeCache = _createCache2._current;
-          };
-        },
-        {
-          _equal: equalWH,
-          _initialValue: {
-            w: 0,
-            h: 0,
-          },
-        }
-      ),
-      updateOverflowAmountCache = _createCache2._update,
-      getCurrentOverflowAmountCache = _createCache2._current;
 
-    var fixScrollSizeRounding = function fixScrollSizeRounding(viewportScrollSize, viewportOffsetSize, viewportRect) {
+    var _createCache3 = createCache(function (_ref) {
-      return {
+        var _viewportScrollSize = _ref._viewportScrollSize,
-        w: viewportScrollSize.w - Math.round(Math.max(0, viewportRect.width - viewportOffsetSize.w)),
+          _viewportClientSize = _ref._viewportClientSize,
-        h: viewportScrollSize.h - Math.round(Math.max(0, viewportRect.height - viewportOffsetSize.h)),
+          _viewportSizeFraction = _ref._viewportSizeFraction;
-      };
+        return {
-    };
+          w: round$1(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
+          h: round$1(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
+        };
+      }, whCacheOptions),
+      updateOverflowAmountCache = _createCache3._update,
+      getCurrentOverflowAmountCache = _createCache3._current;
 
     var fixFlexboxGlue = function fixFlexboxGlue(viewportOverflowState, heightIntrinsic) {
       style(_viewport, {
@@ -1399,13 +1460,12 @@
 
         var _overflowScroll = viewportOverflowState._overflowScroll,
           _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
-        var hostBCR = getBoundingClientRect(_host);
+        var hostSizeFraction = sizeFraction(_host);
-        var hostOffsetSize = offsetSize(_host);
         var hostClientSize = clientSize(_host);
         var paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
-        var clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
+        var fractionalcleintHeight = hostClientSize.h + (abs$1(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
         style(_viewport, {
-          height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
+          height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
         });
       }
     };
@@ -1440,33 +1500,13 @@
     };
 
     var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
-      var setPartialStylePerAxis = function setPartialStylePerAxis(horizontal, overflowAmount, behavior, styleObj) {
+      var _setAxisOverflowStyle = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj),
-        var overflowKey = horizontal ? 'overflowX' : 'overflowY';
+        xVisible = _setAxisOverflowStyle._visible,
-        var behaviorIsVisible = behavior.indexOf('visible') === 0;
+        xVisibleBehavior = _setAxisOverflowStyle._behavior;
-        var behaviorIsVisibleHidden = behavior === 'visible-hidden';
-        var behaviorIsScroll = behavior === 'scroll';
 
-        if (behaviorIsVisible) {
+      var _setAxisOverflowStyle2 = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj),
-          styleObj[overflowKey] = 'visible';
+        yVisible = _setAxisOverflowStyle2._visible,
-        }
+        yVisibleBehavior = _setAxisOverflowStyle2._behavior;
-
-        if (behaviorIsScroll && overflowAmount > 0) {
-          styleObj[overflowKey] = behavior;
-        }
-
-        return {
-          _visible: behaviorIsVisible,
-          _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
-        };
-      };
-
-      var _setPartialStylePerAx = setPartialStylePerAxis(true, overflowAmount.w, overflow.x, viewportStyleObj),
-        xVisible = _setPartialStylePerAx._visible,
-        xVisibleBehavior = _setPartialStylePerAx._behavior;
-
-      var _setPartialStylePerAx2 = setPartialStylePerAxis(false, overflowAmount.h, overflow.y, viewportStyleObj),
-        yVisible = _setPartialStylePerAx2._visible,
-        yVisibleBehavior = _setPartialStylePerAx2._behavior;
 
       if (xVisible && !yVisible) {
         viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1479,7 +1519,7 @@
       return getViewportOverflowState(showNativeOverlaidScrollbars, viewportStyleObj);
     };
 
-    var arrangeViewport = function arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL) {
+    var arrangeViewport = function arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL) {
       if (_doViewportArrange) {
         var _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset,
           _scrollbarsHideOffsetArrange = viewportOverflowState._scrollbarsHideOffsetArrange;
@@ -1494,9 +1534,11 @@
         var viewportArrangeHorizontalPaddingKey = directionIsRTL ? 'paddingRight' : 'paddingLeft';
         var viewportArrangeHorizontalPaddingValue = viewportPaddingStyle[viewportArrangeHorizontalPaddingKey];
         var viewportArrangeVerticalPaddingValue = viewportPaddingStyle.paddingTop;
+        var fractionalContentWidth = viewportScrollSize.w + (abs$1(viewportSizeFraction.w) < 1 ? viewportSizeFraction.w : 0);
+        var fractionalContenHeight = viewportScrollSize.h + (abs$1(viewportSizeFraction.h) < 1 ? viewportSizeFraction.h : 0);
         var arrangeSize = {
-          w: hideOffsetY && arrangeY ? hideOffsetY + contentScrollSize.w - viewportArrangeHorizontalPaddingValue + 'px' : '',
+          w: hideOffsetY && arrangeY ? hideOffsetY + fractionalContentWidth - viewportArrangeHorizontalPaddingValue + 'px' : '',
-          h: hideOffsetX && arrangeX ? hideOffsetX + contentScrollSize.h - viewportArrangeVerticalPaddingValue + 'px' : '',
+          h: hideOffsetX && arrangeX ? hideOffsetX + fractionalContenHeight - viewportArrangeVerticalPaddingValue + 'px' : '',
         };
 
         if (_viewportArrange) {
@@ -1517,8 +1559,8 @@
           }
         } else {
           style(_viewport, {
-            '--viewport-arrange-width': arrangeSize.w,
+            '--os-vaw': arrangeSize.w,
-            '--viewport-arrange-height': arrangeSize.h,
+            '--os-vah': arrangeSize.h,
           });
         }
       }
@@ -1543,7 +1585,7 @@
       var verticalMarginValue = viewportPaddingStyle.marginBottom;
       var horizontalPaddingValue = viewportPaddingStyle[viewportHorizontalPaddingKey];
       var verticalPaddingValue = viewportPaddingStyle.paddingBottom;
-      viewportStyleObj.maxWidth = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
+      viewportStyleObj.width = 'calc(100% + ' + (hideOffsetY + horizontalMarginValue * -1) + 'px)';
       viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
       viewportStyleObj.marginBottom = -hideOffsetX + verticalMarginValue;
 
@@ -1579,7 +1621,7 @@
         }
 
         if (arrangeX) {
-          assignProps('marginTop marginBottom paddingTop paddingBottom');
+          assignProps('marginBottom paddingTop paddingBottom');
         }
 
         if (arrangeY) {
@@ -1629,8 +1671,9 @@
       var showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
       var adjustFlexboxGlue =
         !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || heightIntrinsicChanged);
+      var viewportSizeFractionCache = getCurrentViewportSizeFraction(force);
+      var viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
       var overflowAmuntCache = getCurrentOverflowAmountCache(force);
-      var contentScrollSizeCache = getCurrentContentScrollSizeCache(force);
       var preMeasureViewportOverflowState;
 
       if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -1651,58 +1694,61 @@
           _redoViewportArrange = _undoViewportArrange._redoViewportArrange,
           undoViewportArrangeOverflowState = _undoViewportArrange._viewportOverflowState;
 
-        var contentSize = clientSize(_viewport);
+        var _viewportSizeFraction3 = (viewportSizeFractionCache = updateViewportSizeFraction(force)),
-        var viewportRect = getBoundingClientRect(_viewport);
+          _viewportSizeFraction2 = _viewportSizeFraction3._value,
-        var viewportOffsetSize = offsetSize(_viewport);
+          viewportSizeFractionCahnged = _viewportSizeFraction3._changed;
-        var viewportScrollSize = scrollSize(_viewport);
-        var viewportClientSize = contentSize;
 
-        var _contentScrollSizeCac = (contentScrollSizeCache = updateContentScrollSizeCache(force, {
+        var _viewportScrollSizeCa = (viewportScrollSizeCache = updateViewportScrollSizeCache(force)),
-            _viewportRect: viewportRect,
+          _viewportScrollSize2 = _viewportScrollSizeCa._value,
-            _viewportOffsetSize: viewportOffsetSize,
+          _viewportScrollSizeChanged = _viewportScrollSizeCa._changed;
-            _viewportScrollSize: viewportScrollSize,
+
-          })),
+        var viewportContentSize = clientSize(_viewport);
-          _contentScrollSize = _contentScrollSizeCac._value,
+        var arrangedViewportScrollSize = _viewportScrollSize2;
-          _contentScrollSizeChanged = _contentScrollSizeCac._changed;
+        var arrangedViewportClientSize = viewportContentSize;
 
         _redoViewportArrange();
 
         if (
-          (_contentScrollSizeChanged || showNativeOverlaidScrollbarsChanged) &&
+          (_viewportScrollSizeChanged || viewportSizeFractionCahnged || showNativeOverlaidScrollbarsChanged) &&
           undoViewportArrangeOverflowState &&
           !showNativeOverlaidScrollbars &&
-          arrangeViewport(undoViewportArrangeOverflowState, _contentScrollSize, directionIsRTL)
+          arrangeViewport(undoViewportArrangeOverflowState, _viewportScrollSize2, _viewportSizeFraction2, directionIsRTL)
         ) {
-          viewportClientSize = clientSize(_viewport);
+          arrangedViewportClientSize = clientSize(_viewport);
-          viewportScrollSize = fixScrollSizeRounding(scrollSize(_viewport), offsetSize(_viewport), getBoundingClientRect(_viewport));
+          arrangedViewportScrollSize = scrollSize(_viewport);
         }
 
         overflowAmuntCache = updateOverflowAmountCache(force, {
-          _contentScrollSize: {
+          _viewportSizeFraction: _viewportSizeFraction2,
-            w: Math.max(_contentScrollSize.w, viewportScrollSize.w),
+          _viewportScrollSize: {
-            h: Math.max(_contentScrollSize.h, viewportScrollSize.h),
+            w: max(_viewportScrollSize2.w, arrangedViewportScrollSize.w),
+            h: max(_viewportScrollSize2.h, arrangedViewportScrollSize.h),
           },
-          _viewportSize: {
+          _viewportClientSize: {
-            w: viewportClientSize.w + Math.max(0, contentSize.w - _contentScrollSize.w),
+            w: arrangedViewportClientSize.w + max(0, viewportContentSize.w - _viewportScrollSize2.w),
-            h: viewportClientSize.h + Math.max(0, contentSize.h - _contentScrollSize.h),
+            h: arrangedViewportClientSize.h + max(0, viewportContentSize.h - _viewportScrollSize2.h),
           },
         });
       }
 
+      var _viewportSizeFraction4 = viewportSizeFractionCache,
+        viewportSizeFraction = _viewportSizeFraction4._value,
+        viewportSizeFractionChanged = _viewportSizeFraction4._changed;
+      var _viewportScrollSizeCa2 = viewportScrollSizeCache,
+        viewportScrollSize = _viewportScrollSizeCa2._value,
+        viewportScrollSizeChanged = _viewportScrollSizeCa2._changed;
+      var _overflowAmuntCache = overflowAmuntCache,
+        overflowAmount = _overflowAmuntCache._value,
+        overflowAmountChanged = _overflowAmuntCache._changed;
+
       var _checkOption2 = checkOption('overflow'),
         overflow = _checkOption2._value,
         overflowChanged = _checkOption2._changed;
 
-      var _contentScrollSizeCac2 = contentScrollSizeCache,
-        contentScrollSize = _contentScrollSizeCac2._value,
-        contentScrollSizeChanged = _contentScrollSizeCac2._changed;
-      var _overflowAmuntCache = overflowAmuntCache,
-        overflowAmount = _overflowAmuntCache._value,
-        overflowAmountChanged = _overflowAmuntCache._changed;
-
       if (
         _paddingStyleChanged ||
-        contentScrollSizeChanged ||
+        viewportSizeFractionChanged ||
+        viewportScrollSizeChanged ||
         overflowAmountChanged ||
         overflowChanged ||
         showNativeOverlaidScrollbarsChanged ||
@@ -1710,16 +1756,15 @@
         adjustFlexboxGlue
       ) {
         var viewportStyle = {
-          marginTop: 0,
           marginRight: 0,
           marginBottom: 0,
           marginLeft: 0,
-          maxWidth: '',
+          width: '',
           overflowY: '',
           overflowX: '',
         };
         var viewportOverflowState = setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyle);
-        var viewportArranged = arrangeViewport(viewportOverflowState, contentScrollSize, directionIsRTL);
+        var viewportArranged = arrangeViewport(viewportOverflowState, viewportScrollSize, viewportSizeFraction, directionIsRTL);
         hideNativeScrollbars(viewportOverflowState, directionIsRTL, viewportArranged, viewportStyle);
 
         if (adjustFlexboxGlue) {
@@ -2195,14 +2240,6 @@
       : undefined;
   };
 
-  var emptyStylePropsToZero = function emptyStylePropsToZero(stlyeObj, baseStyle) {
-    return keys(stlyeObj).reduce(function (obj, key) {
-      var value = stlyeObj[key];
-      obj[key] = value === '' ? 0 : value;
-      return obj;
-    }, _extends_1({}, baseStyle));
-  };
-
   var ignorePrefix = 'os-';
   var hostSelector = '.' + classNameHost;
   var viewportSelector = '.' + classNameViewport;
@@ -2249,7 +2286,6 @@
       h: 0,
     },
     _viewportPaddingStyle: {
-      marginTop: 0,
       marginRight: 0,
       marginBottom: 0,
       marginLeft: 0,
@@ -2274,7 +2310,6 @@
       removeEnvironmentListener = _getEnvironment._removeListener;
 
     var doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
-    var lifecycles = [];
     var instance = {
       _options: options,
       _structureSetup: structureSetup,
@@ -2283,19 +2318,10 @@
         return lifecycleCommunication;
       },
       _setLifecycleCommunication: function _setLifecycleCommunication(newLifecycleCommunication) {
-        if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
-          newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
-            newLifecycleCommunication._viewportPaddingStyle,
-            lifecycleCommunicationFallback._viewportPaddingStyle
-          );
-        }
-
         lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
       },
     };
-    push(lifecycles, createTrinsicLifecycle(instance));
+    var lifecycles = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
-    push(lifecycles, createPaddingLifecycle(instance));
-    push(lifecycles, createOverflowLifecycle(instance));
 
     var updateLifecycles = function updateLifecycles(updateHints, changedOptions, force) {
       var _ref = updateHints || {},
@@ -2357,6 +2383,10 @@
       if (isNumber(scrollOffsetY)) {
         scrollTop(_viewport, scrollOffsetY);
       }
+
+      if (options.callbacks.onUpdated) {
+        options.callbacks.onUpdated();
+      }
     };
 
     var onSizeChanged = function onSizeChanged(directionIsRTL) {

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -5,8 +5,6 @@ import {
   CacheValues,
   PartialOptions,
   each,
-  push,
-  keys,
   hasOwnProperty,
   isNumber,
   scrollLeft,
@@ -84,16 +82,6 @@ export interface LifecycleHub {
 const getPropByPath = <T>(obj: any, path: string): T =>
   obj ? path.split('.').reduce((o, prop) => (o && hasOwnProperty(o, prop) ? o[prop] : undefined), obj) : undefined;
 
-const emptyStylePropsToZero = (stlyeObj: StyleObject, baseStyle?: StyleObject) =>
-  keys(stlyeObj).reduce(
-    (obj, key) => {
-      const value = stlyeObj[key];
-      obj[key] = value === '' ? 0 : value;
-      return obj;
-    },
-    { ...baseStyle }
-  );
-
 // TODO: observer textarea attrs if textarea
 // TODO: tabindex, open etc.
 // TODO: test _ignoreContentChange & _ignoreNestedTargetChange for content dom observer
@@ -139,7 +127,6 @@ const lifecycleCommunicationFallback: LifecycleCommunication = {
     h: 0,
   },
   _viewportPaddingStyle: {
-    marginTop: 0,
     marginRight: 0,
     marginBottom: 0,
     marginLeft: 0,
@@ -161,27 +148,16 @@ export const createLifecycleHub = (options: OSOptions, structureSetup: Structure
     _removeListener: removeEnvironmentListener,
   } = getEnvironment();
   const doViewportArrange = !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
-  const lifecycles: Lifecycle[] = [];
   const instance: LifecycleHub = {
     _options: options,
     _structureSetup: structureSetup,
     _doViewportArrange: doViewportArrange,
     _getLifecycleCommunication: () => lifecycleCommunication,
     _setLifecycleCommunication(newLifecycleCommunication) {
-      if (newLifecycleCommunication && newLifecycleCommunication._viewportPaddingStyle) {
-        newLifecycleCommunication._viewportPaddingStyle = emptyStylePropsToZero(
-          newLifecycleCommunication._viewportPaddingStyle,
-          lifecycleCommunicationFallback._viewportPaddingStyle
-        );
-      }
-
       lifecycleCommunication = assignDeep({}, lifecycleCommunication, newLifecycleCommunication);
     },
   };
-
+  const lifecycles: Lifecycle[] = [createTrinsicLifecycle(instance), createPaddingLifecycle(instance), createOverflowLifecycle(instance)];
-  push(lifecycles, createTrinsicLifecycle(instance));
-  push(lifecycles, createPaddingLifecycle(instance));
-  push(lifecycles, createOverflowLifecycle(instance));
 
   const updateLifecycles = (updateHints?: Partial<LifecycleUpdateHints> | null, changedOptions?: Partial<OSOptions> | null, force?: boolean) => {
     let {

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -58,6 +58,25 @@ const sizeFraction = (elm: HTMLElement): WH<number> => {
     h: viewportRect.height - viewportOffsetSize.h,
   };
 };
+const setAxisOverflowStyle = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => {
+  const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY';
+  const behaviorIsVisible = behavior.indexOf('visible') === 0;
+  const behaviorIsVisibleHidden = behavior === 'visible-hidden';
+  const behaviorIsScroll = behavior === 'scroll';
+  const hasOverflow = overflowAmount > 0;
+
+  if (behaviorIsVisible) {
+    styleObj[overflowKey] = 'visible';
+  }
+  if (behaviorIsScroll && hasOverflow) {
+    styleObj[overflowKey] = behavior;
+  }
+
+  return {
+    _visible: behaviorIsVisible,
+    _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
+  };
+};
 
 /**
  * Lifecycle with the responsibility to set the correct overflow and scrollbar hiding styles of the viewport element.
@@ -96,15 +115,14 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     if (heightIntrinsic) {
       const { _absolute: paddingAbsolute, _padding: padding } = _getLifecycleCommunication()._paddingInfo;
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
-      const hostBCR = getBoundingClientRect(_host);
+      const hostSizeFraction = sizeFraction(_host);
-      const hostOffsetSize = offsetSize(_host);
       const hostClientSize = clientSize(_host);
       // padding subtraction is only needed if padding is absolute or if viewport is content-box
       const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
-      const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
+      const fractionalcleintHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
 
       style(_viewport, {
-        height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
+        height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
       });
     }
   };
@@ -154,26 +172,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     overflow: OverflowOption,
     viewportStyleObj: StyleObject
   ): ViewportOverflowState => {
-    const setPartialStylePerAxis = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => {
+    const { _visible: xVisible, _behavior: xVisibleBehavior } = setAxisOverflowStyle(true, overflowAmount!.w, overflow.x, viewportStyleObj);
-      const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY';
+    const { _visible: yVisible, _behavior: yVisibleBehavior } = setAxisOverflowStyle(false, overflowAmount!.h, overflow.y, viewportStyleObj);
-      const behaviorIsVisible = behavior.indexOf('visible') === 0;
-      const behaviorIsVisibleHidden = behavior === 'visible-hidden';
-      const behaviorIsScroll = behavior === 'scroll';
-
-      if (behaviorIsVisible) {
-        styleObj[overflowKey] = 'visible';
-      }
-      if (behaviorIsScroll && overflowAmount > 0) {
-        styleObj[overflowKey] = behavior;
-      }
-
-      return {
-        _visible: behaviorIsVisible,
-        _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
-      };
-    };
-    const { _visible: xVisible, _behavior: xVisibleBehavior } = setPartialStylePerAxis(true, overflowAmount!.w, overflow.x, viewportStyleObj);
-    const { _visible: yVisible, _behavior: yVisibleBehavior } = setPartialStylePerAxis(false, overflowAmount!.h, overflow.y, viewportStyleObj);
 
     if (xVisible && !yVisible) {
       viewportStyleObj.overflowX = xVisibleBehavior;
@@ -231,9 +231,9 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
           }
         }
       } else {
-        style<'--viewport-arrange-width' | '--viewport-arrange-height'>(_viewport, {
+        style<'--os-vaw' | '--os-vah'>(_viewport, {
-          '--viewport-arrange-width': arrangeSize.w,
+          '--os-vaw': arrangeSize.w,
-          '--viewport-arrange-height': arrangeSize.h,
+          '--os-vah': arrangeSize.h,
         });
       }
     }
@@ -308,7 +308,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       }
 
       if (arrangeX) {
-        assignProps('marginTop marginBottom paddingTop paddingBottom');
+        assignProps('marginBottom paddingTop paddingBottom');
       }
 
       if (arrangeY) {
@@ -416,7 +416,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       adjustFlexboxGlue
     ) {
       const viewportStyle: StyleObject = {
-        marginTop: 0,
         marginRight: 0,
         marginBottom: 0,
         marginLeft: 0,

packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts

@@ -13,6 +13,7 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
   const { _host, _padding, _viewport } = _structureSetup._targetObj;
   const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
     _equal: equalTRBL,
+    _initialValue: topRightBottomLeft(),
   });
 
   return (updateHints, checkOption, force) => {
@@ -30,21 +31,18 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
     const paddingStyleChanged = paddingAbsoluteChanged || directionChanged || paddingChanged;
 
     if (paddingStyleChanged) {
-      const { _value: padding } = updatePaddingCache(force);
+      // if there is no padding element and no scrollbar styling, paddingAbsolute isn't supported
-      // if there is no padding element and no scrollbar styling padding absolute isn't supported
       const paddingRelative = !paddingAbsolute || (!_padding && !_nativeScrollbarStyling);
       const paddingHorizontal = padding!.r + padding!.l;
       const paddingVertical = padding!.t + padding!.b;
 
       const paddingStyle: StyleObject = {
-        marginTop: 0,
+        marginRight: paddingRelative && !directionIsRTL ? -paddingHorizontal : 0,
-        marginRight: 0,
         marginBottom: paddingRelative ? -paddingVertical : 0,
-        marginLeft: 0,
+        marginLeft: paddingRelative && directionIsRTL ? -paddingHorizontal : 0,
         top: paddingRelative ? -padding!.t : 0,
-        right: 0,
+        right: paddingRelative ? (directionIsRTL ? -padding!.r : 'auto') : 0,
-        bottom: 0,
+        left: paddingRelative ? (directionIsRTL ? 'auto' : -padding!.l) : 0,
-        left: 0,
         width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
       };
       const viewportStyle: StyleObject = {
@@ -54,15 +52,6 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
         paddingLeft: paddingRelative ? padding!.l : 0,
       };
 
-      if (paddingRelative) {
-        const horizontalPositionKey: keyof StyleObject = directionIsRTL ? 'right' : 'left';
-        const horizontalMarginKey: keyof StyleObject = directionIsRTL ? 'marginLeft' : 'marginRight';
-        const horizontalPositionValue = directionIsRTL ? padding!.r : padding!.l;
-
-        paddingStyle[horizontalPositionKey] = -horizontalPositionValue;
-        paddingStyle[horizontalMarginKey] = -paddingHorizontal;
-      }
-
       // if there is no padding element apply the style to the viewport element instead
       style(_padding || _viewport, paddingStyle);
       style(_viewport, viewportStyle);

packages/overlayscrollbars/src/styles/overlayscrollbars.scss

@@ -2,14 +2,14 @@
 @import './trinsicobserver.scss';
 
 .os-environment {
-  --os-css-custom-prop: -1;
+  --os-custom-prop: -1;
   position: fixed;
   opacity: 0;
   visibility: hidden;
   overflow: scroll;
   height: 200px;
   width: 200px;
-  z-index: var(--os-css-custom-prop);
+  z-index: var(--os-custom-prop);
 
   div {
     width: 200%;
@@ -93,8 +93,8 @@
 }
 
 .os-viewport {
-  --viewport-arrange-width: 0;
+  --os-vaw: 0;
-  --viewport-arrange-height: 0;
+  --os-vah: 0;
 
   &.os-viewport-arrange::before {
     content: '';
@@ -103,8 +103,8 @@
     z-index: -1;
     min-width: 1px;
     min-height: 1px;
-    width: var(--viewport-arrange-width);
+    width: var(--os-vaw);
-    height: var(--viewport-arrange-height);
+    height: var(--os-vah);
   }
 }
 

packages/overlayscrollbars/src/support/dom/style.ts

@@ -96,11 +96,12 @@ export const show = (elm: HTMLElement | false | null | undefined): void => {
 };
 
 /**
- * Returns a top
+ * Returns the top right bottom left values of the passed css property.
- * @param elm
+ * @param elm The element of which the values shall be returned.
- * @param property
+ * @param propertyPrefix The css property prefix. (e.g. "border")
+ * @param propertySuffix The css property suffix. (e.g. "width")
  */
-export const topRightBottomLeft = (elm: HTMLElement | false | null | undefined, propertyPrefix?: string, propertySuffix?: string): TRBL => {
+export const topRightBottomLeft = (elm?: HTMLElement | false | null | undefined, propertyPrefix?: string, propertySuffix?: string): TRBL => {
   const finalPrefix = propertyPrefix ? `${propertyPrefix}-` : '';
   const finalSuffix = propertySuffix ? `-${propertySuffix}` : '';
   const top = `${finalPrefix}top${finalSuffix}`;

packages/overlayscrollbars/types/options.d.ts

@@ -40,6 +40,9 @@ export interface OSOptions {
         show: boolean;
         initialize: boolean;
     };
+    callbacks: {
+        onUpdated: (() => any) | null;
+    };
 }
 export interface OverflowChangedArgs {
     x: boolean;

packages/overlayscrollbars/types/support/compatibility/vendors.d.ts

@@ -7,17 +7,17 @@ export declare const cssCache: {
     [key: string]: string;
 };
 /**
- * Gets the name of the given CSS property with vendor prefix if it isn't supported without, or undefined if unsupported.
+ * Gets the name of the given CSS property with vendor prefix if it isn't supported without it, or and empty string if unsupported.
  * @param name The name of the CSS property which shall be get.
  */
-export declare const cssProperty: (name: string) => string | undefined;
+export declare const cssProperty: (name: string) => string;
 /**
- * Get the name of the given CSS property value(s), with vendor prefix if it isn't supported wuthout, or undefined if no value is supported.
+ * Get the name of the given CSS property value(s), with vendor prefix if it isn't supported without it, or an empty string if no value is supported.
  * @param property The CSS property to which the CSS property value(s) belong.
  * @param values The value(s) separated by spaces which shall be get.
  * @param suffix A suffix which is added to each value in case the value is a function or something else more advanced.
  */
-export declare const cssPropertyValue: (property: string, values: string, suffix?: string | undefined) => string | undefined;
+export declare const cssPropertyValue: (property: string, values: string, suffix?: string | undefined) => string;
 /**
  * Get the requested JS function, object or constructor with vendor prefix if it isn't supported without or undefined if unsupported.
  * @param name The name of the JS function, object or constructor.

packages/overlayscrollbars/types/support/dom/style.d.ts

@@ -26,8 +26,9 @@ export declare const hide: (elm: HTMLElement | false | null | undefined) => void
  */
 export declare const show: (elm: HTMLElement | false | null | undefined) => void;
 /**
- * Returns a top
+ * Returns the top right bottom left values of the passed css property.
- * @param elm
+ * @param elm The element of which the values shall be returned.
- * @param property
+ * @param propertyPrefix The css property prefix. (e.g. "border")
+ * @param propertySuffix The css property suffix. (e.g. "width")
  */
-export declare const topRightBottomLeft: (elm: HTMLElement | false | null | undefined, propertyPrefix?: string | undefined, propertySuffix?: string | undefined) => TRBL;
+export declare const topRightBottomLeft: (elm?: HTMLElement | false | null | undefined, propertyPrefix?: string | undefined, propertySuffix?: string | undefined) => TRBL;