improve code

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -778,7 +778,7 @@ const getOptionsDiff = (currOptions, newOptions) => {
 let environmentInstance;
 const {
   abs,
-  round: round$1
+  round
 } = Math;
 
 const diffBiggerThanOne = (valOne, valTwo) => {
@@ -923,8 +923,8 @@ const createEnvironment = () => {
           h: abs(deltaSize.h)
         };
         const deltaAbsRatio = {
-          w: abs(round$1(sizeNew.w / (size.w / 100.0))),
+          w: abs(round(sizeNew.w / (size.w / 100.0))),
-          h: abs(round$1(sizeNew.h / (size.h / 100.0)))
+          h: abs(round(sizeNew.h / (size.h / 100.0)))
         };
         const dprNew = getWindowDPR();
         const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
@@ -1199,8 +1199,7 @@ const createPaddingUpdate = (structureSetupElements, state) => {
 };
 
 const {
-  max,
+  max
-  round
 } = Math;
 const overlaidScrollbarsHideOffset = 42;
 const whCacheOptions = {
@@ -1233,22 +1232,18 @@ const setAxisOverflowStyle = (horizontal, overflowAmount, behavior, styleObj) =>
     styleObj[overflowKey] = behavior;
   }
 
-  return {
+  return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'];
-    _visible: behaviorIsVisible,
-    _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll'
-  };
 };
 
 const getOverflowAmount = (viewportScrollSize, viewportClientSize, sizeFraction) => {
-  const condition = raw => window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0;
+  const tollerance = window.devicePixelRatio % 2 !== 0 ? 1 : 0;
-
   const amount = {
     w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
     h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h))
   };
   return {
-    w: condition(amount.w) ? amount.w : 0,
+    w: amount.w >= tollerance ? amount.w : 0,
-    h: condition(amount.h) ? amount.h : 0
+    h: amount.h >= tollerance ? amount.h : 0
   };
 };
 
@@ -1285,14 +1280,13 @@ const createOverflowUpdate = (structureSetupElements, state) => {
         _overflowScroll,
         _scrollbarsHideOffset
       } = viewportOverflowState;
-      const hostCssHeight = parseFloat(style(_host, 'height'));
+      const fSize = fractionalSize(_host);
       const hostClientSize = clientSize(_host);
       const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
       const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
-      const fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
       const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
       style(_viewport, {
-        height: fractionalClientHeight + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
+        height: hostClientSize.h + fSize.h + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
       });
     }
   };
@@ -1328,14 +1322,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
   };
 
   const setViewportOverflowState = (showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) => {
-    const {
+    const [xVisible, xVisibleBehavior] = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj);
-      _visible: xVisible,
+    const [yVisible, yVisibleBehavior] = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj);
-      _behavior: xVisibleBehavior
-    } = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj);
-    const {
-      _visible: yVisible,
-      _behavior: yVisibleBehavior
-    } = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj);
 
     if (xVisible && !yVisible) {
       viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1497,6 +1485,7 @@ const createOverflowUpdate = (structureSetupElements, state) => {
       _directionIsRTL
     } = getState();
     const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] = checkOption('nativeScrollbarsOverlaid.show');
+    const [overflow, overflowChanged] = checkOption('overflow');
     const showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
     const adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || _heightIntrinsicChanged);
     let sizeFractionCache = getCurrentSizeFraction(force);
@@ -1540,10 +1529,9 @@ const createOverflowUpdate = (structureSetupElements, state) => {
       }, _sizeFraction), force);
     }
 
-    const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
-    const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
     const [overflowAmount, overflowAmountChanged] = overflowAmuntCache;
-    const [overflow, overflowChanged] = checkOption('overflow');
+    const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
+    const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
 
     if (_paddingStyleChanged || _directionChanged || sizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || adjustFlexboxGlue) {
       const viewportStyle = {
@@ -1565,8 +1553,8 @@ const createOverflowUpdate = (structureSetupElements, state) => {
 
       style(_viewport, viewportStyle);
       setState({
-        _viewportOverflowScroll: overflowScroll,
+        _overflowScroll: overflowScroll,
-        _viewportOverflowAmount: overflowAmount
+        _overflowAmount: overflowAmount
       });
       return {
         _overflowAmountChanged: overflowAmountChanged,
@@ -1576,8 +1564,6 @@ const createOverflowUpdate = (structureSetupElements, state) => {
   };
 };
 
-const applyForceToCache = (cacheValues, force) => [cacheValues[0], force || cacheValues[1], cacheValues[2]];
-
 const prepareUpdateHints = (leading, adaptive, force) => {
   const result = {};
   const finalAdaptive = adaptive || {};
@@ -1585,7 +1571,7 @@ const prepareUpdateHints = (leading, adaptive, force) => {
   each(objKeys, key => {
     const leadingValue = leading[key];
     const adaptiveValue = finalAdaptive[key];
-    result[key] = isBoolean(leadingValue) ? !!force || !!leadingValue || !!adaptiveValue : applyForceToCache(leadingValue, force);
+    result[key] = !!(force || leadingValue || adaptiveValue);
   });
   return result;
 };
@@ -1604,20 +1590,14 @@ const createStructureSetupUpdate = (structureSetupElements, state) => {
   return (checkOption, updateHints, force) => {
     const initialUpdateHints = prepareUpdateHints(assignDeep({
       _sizeChanged: false,
-      _hostMutation: false,
-      _contentMutation: false,
       _paddingStyleChanged: false,
       _directionChanged: false,
       _heightIntrinsicChanged: false,
       _overflowScrollChanged: false,
-      _overflowAmountChanged: false
+      _overflowAmountChanged: false,
-    }, Object.keys(updateHints).reduce((acc, key) => {
+      _hostMutation: false,
-      if (!isUndefined(updateHints[key])) {
+      _contentMutation: false
-        acc[key] = updateHints[key];
+    }, updateHints), {}, force);
-      }
-
-      return acc;
-    }, {})), {}, force);
     const adjustScrollOffset = doViewportArrange || !_flexboxGlue;
     const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
     const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
@@ -2045,22 +2025,12 @@ const createStructureSetupObservers = (structureSetupElements, state, structureS
     _maxDelay: () => debounceMaxDelay,
 
     _mergeParams(prev, curr) {
-      const {
+      const [prevObj] = prev;
-        _sizeChanged: prevSizeChanged,
+      const [currObj] = curr;
-        _hostMutation: prevHostMutation,
+      return [keys(prevObj).concat(keys(currObj)).reduce((obj, key) => {
-        _contentMutation: prevContentMutation
+        obj[key] = prevObj[key] || currObj[key];
-      } = prev[0];
+        return obj;
-      const {
+      }, {})];
-        _sizeChanged: currSizeChanged,
-        _hostMutation: currvHostMutation,
-        _contentMutation: currContentMutation
-      } = curr[0];
-      const merged = [{
-        _sizeChanged: prevSizeChanged || currSizeChanged,
-        _hostMutation: prevHostMutation || currvHostMutation,
-        _contentMutation: prevContentMutation || currContentMutation
-      }];
-      return merged;
     }
 
   });
@@ -2200,11 +2170,11 @@ const initialStructureSetupUpdateState = {
     paddingBottom: 0,
     paddingLeft: 0
   },
-  _viewportOverflowAmount: {
+  _overflowAmount: {
     w: 0,
     h: 0
   },
-  _viewportOverflowScroll: {
+  _overflowScroll: {
     x: false,
     y: false
   },
@@ -2215,7 +2185,7 @@ const createStructureSetup = (target, options) => {
   const checkOptionsFallback = createOptionCheck(options, {});
   const state = createState(initialStructureSetupUpdateState);
   const onUpdatedListeners = new Set();
-  const [getUpdateState] = state;
+  const [getState] = state;
 
   const runOnUpdatedListeners = (updateHints, changedOptions, force) => {
     runEach(onUpdatedListeners, [updateHints, changedOptions || {}, !!force]);
@@ -2226,7 +2196,7 @@ const createStructureSetup = (target, options) => {
   const [updateObservers, destroyObservers] = createStructureSetupObservers(elements, state, updateHints => {
     runOnUpdatedListeners(updateStructure(checkOptionsFallback, updateHints));
   });
-  const structureSetupState = getUpdateState.bind(0);
+  const structureSetupState = getState.bind(0);
 
   structureSetupState._addOnUpdatedListener = listener => {
     onUpdatedListeners.add(listener);
@@ -2455,31 +2425,33 @@ const OverlayScrollbars = (target, options, eventListeners) => {
   structureState._addOnUpdatedListener((updateHints, changedOptions, force) => {
     const {
       _sizeChanged,
-      _contentMutation,
-      _hostMutation,
       _directionChanged,
       _heightIntrinsicChanged,
       _overflowAmountChanged,
-      _overflowScrollChanged
+      _overflowScrollChanged,
+      _contentMutation,
+      _hostMutation
     } = updateHints;
     const {
-      _viewportOverflowAmount,
+      _overflowAmount,
-      _viewportOverflowScroll
+      _overflowScroll
     } = structureState();
 
     if (_overflowAmountChanged || _overflowScrollChanged) {
-      triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll), {
+      triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
-        previous: createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll)
+        previous: createOverflowChangedArgs(_overflowAmount, _overflowScroll)
       }));
     }
 
     triggerEvent('updated', {
       updateHints: {
         sizeChanged: _sizeChanged,
-        contentMutation: _contentMutation,
-        hostMutation: _hostMutation,
         directionChanged: _directionChanged,
-        heightIntrinsicChanged: _heightIntrinsicChanged
+        heightIntrinsicChanged: _heightIntrinsicChanged,
+        overflowAmountChanged: _overflowAmountChanged,
+        overflowScrollChanged: _overflowScrollChanged,
+        contentMutation: _contentMutation,
+        hostMutation: _hostMutation
       },
       changedOptions,
       force
@@ -2504,7 +2476,7 @@ const OverlayScrollbars = (target, options, eventListeners) => {
     on: addEvent,
     off: removeEvent,
     state: () => ({
-      _overflowAmount: structureState()._viewportOverflowAmount
+      _overflowAmount: structureState()._overflowAmount
     }),
 
     update(force) {

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -865,7 +865,7 @@
 
   var environmentInstance;
   var abs = Math.abs,
-      round$1 = Math.round;
+      round = Math.round;
 
   var diffBiggerThanOne = function diffBiggerThanOne(valOne, valTwo) {
     var absValOne = abs(valOne);
@@ -1012,8 +1012,8 @@
             h: abs(deltaSize.h)
           };
           var deltaAbsRatio = {
-            w: abs(round$1(sizeNew.w / (size.w / 100.0))),
+            w: abs(round(sizeNew.w / (size.w / 100.0))),
-            h: abs(round$1(sizeNew.h / (size.h / 100.0)))
+            h: abs(round(sizeNew.h / (size.h / 100.0)))
           };
           var dprNew = getWindowDPR();
           var deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;
@@ -1297,8 +1297,7 @@
     };
   };
 
-  var max = Math.max,
+  var max = Math.max;
-      round = Math.round;
   var overlaidScrollbarsHideOffset = 42;
   var whCacheOptions = {
     _equal: equalWH,
@@ -1330,24 +1329,18 @@
       styleObj[overflowKey] = behavior;
     }
 
-    return {
+    return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'];
-      _visible: behaviorIsVisible,
-      _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll'
-    };
   };
 
   var getOverflowAmount = function getOverflowAmount(viewportScrollSize, viewportClientSize, sizeFraction) {
-    var condition = function condition(raw) {
+    var tollerance = window.devicePixelRatio % 2 !== 0 ? 1 : 0;
-      return window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0;
-    };
-
     var amount = {
       w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
       h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h))
     };
     return {
-      w: condition(amount.w) ? amount.w : 0,
+      w: amount.w >= tollerance ? amount.w : 0,
-      h: condition(amount.h) ? amount.h : 0
+      h: amount.h >= tollerance ? amount.h : 0
     };
   };
 
@@ -1393,14 +1386,13 @@
 
         var _overflowScroll = viewportOverflowState._overflowScroll,
             _scrollbarsHideOffset = viewportOverflowState._scrollbarsHideOffset;
-        var hostCssHeight = parseFloat(style(_host, 'height'));
+        var fSize = fractionalSize(_host);
         var hostClientSize = clientSize(_host);
         var isContentBox = style(_viewport, 'boxSizing') === 'content-box';
         var paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
-        var fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
         var subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
         style(_viewport, {
-          height: fractionalClientHeight + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
+          height: hostClientSize.h + fSize.h + (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) - paddingVertical
         });
       }
     };
@@ -1435,12 +1427,12 @@
 
     var setViewportOverflowState = function setViewportOverflowState(showNativeOverlaidScrollbars, overflowAmount, overflow, viewportStyleObj) {
       var _setAxisOverflowStyle = setAxisOverflowStyle(true, overflowAmount.w, overflow.x, viewportStyleObj),
-          xVisible = _setAxisOverflowStyle._visible,
+          xVisible = _setAxisOverflowStyle[0],
-          xVisibleBehavior = _setAxisOverflowStyle._behavior;
+          xVisibleBehavior = _setAxisOverflowStyle[1];
 
       var _setAxisOverflowStyle2 = setAxisOverflowStyle(false, overflowAmount.h, overflow.y, viewportStyleObj),
-          yVisible = _setAxisOverflowStyle2._visible,
+          yVisible = _setAxisOverflowStyle2[0],
-          yVisibleBehavior = _setAxisOverflowStyle2._behavior;
+          yVisibleBehavior = _setAxisOverflowStyle2[1];
 
       if (xVisible && !yVisible) {
         viewportStyleObj.overflowX = xVisibleBehavior;
@@ -1588,6 +1580,10 @@
           showNativeOverlaidScrollbarsOption = _checkOption[0],
           showNativeOverlaidScrollbarsChanged = _checkOption[1];
 
+      var _checkOption2 = checkOption('overflow'),
+          overflow = _checkOption2[0],
+          overflowChanged = _checkOption2[1];
+
       var showNativeOverlaidScrollbars = showNativeOverlaidScrollbarsOption && _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y;
       var adjustFlexboxGlue = !_flexboxGlue && (_sizeChanged || _contentMutation || _hostMutation || showNativeOverlaidScrollbarsChanged || _heightIntrinsicChanged);
       var sizeFractionCache = getCurrentSizeFraction(force);
@@ -1640,19 +1636,15 @@
         }, _sizeFraction), force);
       }
 
-      var _sizeFractionCache2 = sizeFractionCache,
-          sizeFraction = _sizeFractionCache2[0],
-          sizeFractionChanged = _sizeFractionCache2[1];
-      var _viewportScrollSizeCa2 = viewportScrollSizeCache,
-          viewportScrollSize = _viewportScrollSizeCa2[0],
-          viewportScrollSizeChanged = _viewportScrollSizeCa2[1];
       var _overflowAmuntCache = overflowAmuntCache,
           overflowAmount = _overflowAmuntCache[0],
           overflowAmountChanged = _overflowAmuntCache[1];
-
+      var _viewportScrollSizeCa2 = viewportScrollSizeCache,
-      var _checkOption2 = checkOption('overflow'),
+          viewportScrollSize = _viewportScrollSizeCa2[0],
-          overflow = _checkOption2[0],
+          viewportScrollSizeChanged = _viewportScrollSizeCa2[1];
-          overflowChanged = _checkOption2[1];
+      var _sizeFractionCache2 = sizeFractionCache,
+          sizeFraction = _sizeFractionCache2[0],
+          sizeFractionChanged = _sizeFractionCache2[1];
 
       if (_paddingStyleChanged || _directionChanged || sizeFractionChanged || viewportScrollSizeChanged || overflowAmountChanged || overflowChanged || showNativeOverlaidScrollbarsChanged || adjustFlexboxGlue) {
         var viewportStyle = {
@@ -1678,8 +1670,8 @@
 
         style(_viewport, viewportStyle);
         setState({
-          _viewportOverflowScroll: overflowScroll,
+          _overflowScroll: overflowScroll,
-          _viewportOverflowAmount: overflowAmount
+          _overflowAmount: overflowAmount
         });
         return {
           _overflowAmountChanged: overflowAmountChanged,
@@ -1689,10 +1681,6 @@
     };
   };
 
-  var applyForceToCache = function applyForceToCache(cacheValues, force) {
-    return [cacheValues[0], force || cacheValues[1], cacheValues[2]];
-  };
-
   var prepareUpdateHints = function prepareUpdateHints(leading, adaptive, force) {
     var result = {};
     var finalAdaptive = adaptive || {};
@@ -1700,7 +1688,7 @@
     each(objKeys, function (key) {
       var leadingValue = leading[key];
       var adaptiveValue = finalAdaptive[key];
-      result[key] = isBoolean(leadingValue) ? !!force || !!leadingValue || !!adaptiveValue : applyForceToCache(leadingValue, force);
+      result[key] = !!(force || leadingValue || adaptiveValue);
     });
     return result;
   };
@@ -1718,20 +1706,14 @@
     return function (checkOption, updateHints, force) {
       var initialUpdateHints = prepareUpdateHints(assignDeep({
         _sizeChanged: false,
-        _hostMutation: false,
-        _contentMutation: false,
         _paddingStyleChanged: false,
         _directionChanged: false,
         _heightIntrinsicChanged: false,
         _overflowScrollChanged: false,
-        _overflowAmountChanged: false
+        _overflowAmountChanged: false,
-      }, Object.keys(updateHints).reduce(function (acc, key) {
+        _hostMutation: false,
-        if (!isUndefined(updateHints[key])) {
+        _contentMutation: false
-          acc[key] = updateHints[key];
+      }, updateHints), {}, force);
-        }
-
-        return acc;
-      }, {})), {}, force);
       var adjustScrollOffset = doViewportArrange || !_flexboxGlue;
       var scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
       var scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
@@ -2188,20 +2170,12 @@
         return debounceMaxDelay;
       },
       _mergeParams: function _mergeParams(prev, curr) {
-        var _prev$ = prev[0],
+        var prevObj = prev[0];
-            prevSizeChanged = _prev$._sizeChanged,
+        var currObj = curr[0];
-            prevHostMutation = _prev$._hostMutation,
+        return [keys(prevObj).concat(keys(currObj)).reduce(function (obj, key) {
-            prevContentMutation = _prev$._contentMutation;
+          obj[key] = prevObj[key] || currObj[key];
-        var _curr$ = curr[0],
+          return obj;
-            currSizeChanged = _curr$._sizeChanged,
+        }, {})];
-            currvHostMutation = _curr$._hostMutation,
-            currContentMutation = _curr$._contentMutation;
-        var merged = [{
-          _sizeChanged: prevSizeChanged || currSizeChanged,
-          _hostMutation: prevHostMutation || currvHostMutation,
-          _contentMutation: prevContentMutation || currContentMutation
-        }];
-        return merged;
       }
     });
 
@@ -2353,11 +2327,11 @@
       paddingBottom: 0,
       paddingLeft: 0
     },
-    _viewportOverflowAmount: {
+    _overflowAmount: {
       w: 0,
       h: 0
     },
-    _viewportOverflowScroll: {
+    _overflowScroll: {
       x: false,
       y: false
     },
@@ -2368,7 +2342,7 @@
     var checkOptionsFallback = createOptionCheck(options, {});
     var state = createState(initialStructureSetupUpdateState);
     var onUpdatedListeners = new Set();
-    var getUpdateState = state[0];
+    var getState = state[0];
 
     var runOnUpdatedListeners = function runOnUpdatedListeners(updateHints, changedOptions, force) {
       runEach(onUpdatedListeners, [updateHints, changedOptions || {}, !!force]);
@@ -2386,7 +2360,7 @@
         updateObservers = _createStructureSetup2[0],
         destroyObservers = _createStructureSetup2[1];
 
-    var structureSetupState = getUpdateState.bind(0);
+    var structureSetupState = getState.bind(0);
 
     structureSetupState._addOnUpdatedListener = function (listener) {
       onUpdatedListeners.add(listener);
@@ -2630,30 +2604,32 @@
 
     structureState._addOnUpdatedListener(function (updateHints, changedOptions, force) {
       var _sizeChanged = updateHints._sizeChanged,
-          _contentMutation = updateHints._contentMutation,
-          _hostMutation = updateHints._hostMutation,
           _directionChanged = updateHints._directionChanged,
           _heightIntrinsicChanged = updateHints._heightIntrinsicChanged,
           _overflowAmountChanged = updateHints._overflowAmountChanged,
-          _overflowScrollChanged = updateHints._overflowScrollChanged;
+          _overflowScrollChanged = updateHints._overflowScrollChanged,
+          _contentMutation = updateHints._contentMutation,
+          _hostMutation = updateHints._hostMutation;
 
       var _structureState = structureState(),
-          _viewportOverflowAmount = _structureState._viewportOverflowAmount,
+          _overflowAmount = _structureState._overflowAmount,
-          _viewportOverflowScroll = _structureState._viewportOverflowScroll;
+          _overflowScroll = _structureState._overflowScroll;
 
       if (_overflowAmountChanged || _overflowScrollChanged) {
-        triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll), {
+        triggerEvent('overflowChanged', assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
-          previous: createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll)
+          previous: createOverflowChangedArgs(_overflowAmount, _overflowScroll)
         }));
       }
 
       triggerEvent('updated', {
         updateHints: {
           sizeChanged: _sizeChanged,
-          contentMutation: _contentMutation,
-          hostMutation: _hostMutation,
           directionChanged: _directionChanged,
-          heightIntrinsicChanged: _heightIntrinsicChanged
+          heightIntrinsicChanged: _heightIntrinsicChanged,
+          overflowAmountChanged: _overflowAmountChanged,
+          overflowScrollChanged: _overflowScrollChanged,
+          contentMutation: _contentMutation,
+          hostMutation: _hostMutation
         },
         changedOptions: changedOptions,
         force: force
@@ -2679,7 +2655,7 @@
       off: removeEvent,
       state: function state() {
         return {
-          _overflowAmount: structureState()._viewportOverflowAmount
+          _overflowAmount: structureState()._overflowAmount
         };
       },
       update: function update(force) {

packages/overlayscrollbars/src/eventListeners.ts

@@ -22,10 +22,12 @@ onHostSizeChanged           : null, // gone
 export interface OnUpdatedEventListenerArgs {
   updateHints: {
     sizeChanged: boolean;
-    hostMutation: boolean;
-    contentMutation: boolean;
     directionChanged: boolean;
     heightIntrinsicChanged: boolean;
+    overflowAmountChanged: boolean;
+    overflowScrollChanged: boolean;
+    hostMutation: boolean;
+    contentMutation: boolean;
   };
   changedOptions: PartialOptions<OSOptions>;
   force: boolean;

packages/overlayscrollbars/src/overlayscrollbars.ts

@@ -111,35 +111,33 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
   structureState._addOnUpdatedListener((updateHints, changedOptions, force) => {
     const {
       _sizeChanged,
-      _contentMutation,
-      _hostMutation,
       _directionChanged,
       _heightIntrinsicChanged,
       _overflowAmountChanged,
       _overflowScrollChanged,
+      _contentMutation,
+      _hostMutation,
     } = updateHints;
-    const { _viewportOverflowAmount, _viewportOverflowScroll } = structureState();
+    const { _overflowAmount, _overflowScroll } = structureState();
 
     if (_overflowAmountChanged || _overflowScrollChanged) {
       triggerEvent(
         'overflowChanged',
-        assignDeep(
+        assignDeep({}, createOverflowChangedArgs(_overflowAmount, _overflowScroll), {
-          {},
+          previous: createOverflowChangedArgs(_overflowAmount!, _overflowScroll!),
-          createOverflowChangedArgs(_viewportOverflowAmount, _viewportOverflowScroll),
+        })
-          {
-            previous: createOverflowChangedArgs(_viewportOverflowAmount!, _viewportOverflowScroll!),
-          }
-        )
       );
     }
 
     triggerEvent('updated', {
       updateHints: {
         sizeChanged: _sizeChanged,
-        contentMutation: _contentMutation,
-        hostMutation: _hostMutation,
         directionChanged: _directionChanged,
         heightIntrinsicChanged: _heightIntrinsicChanged,
+        overflowAmountChanged: _overflowAmountChanged,
+        overflowScrollChanged: _overflowScrollChanged,
+        contentMutation: _contentMutation,
+        hostMutation: _hostMutation,
       },
       changedOptions,
       force,
@@ -163,7 +161,7 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
     on: addEvent,
     off: removeEvent,
     state: () => ({
-      _overflowAmount: structureState()._viewportOverflowAmount,
+      _overflowAmount: structureState()._overflowAmount,
     }),
     update(force?: boolean) {
       update({}, force);

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts

@@ -9,6 +9,7 @@ import {
   attr,
   removeAttr,
   CacheValues,
+  keys,
 } from 'support';
 import { getEnvironment } from 'environment';
 import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
@@ -29,6 +30,12 @@ export type StructureSetupObservers = [
   destroy: () => void
 ];
 
+type ExcludeFromTuple<T extends readonly any[], E> = T extends [infer F, ...infer R]
+  ? [F] extends [E]
+    ? ExcludeFromTuple<R, E>
+    : [F, ...ExcludeFromTuple<R, E>]
+  : [];
+
 // const hostSelector = `.${classNameHost}`;
 
 // TODO: observer textarea attrs if textarea
@@ -55,12 +62,6 @@ const ignoreTargetChange = (
   return false;
 };
 
-type ExcludeFromTuple<T extends readonly any[], E> = T extends [infer F, ...infer R]
-  ? [F] extends [E]
-    ? ExcludeFromTuple<R, E>
-    : [F, ...ExcludeFromTuple<R, E>]
-  : [];
-
 export const createStructureSetupObservers = (
   structureSetupElements: StructureSetupElementsObj,
   state: SetupState<StructureSetupState>,
@@ -81,25 +82,16 @@ export const createStructureSetupObservers = (
     _timeout: () => debounceTimeout,
     _maxDelay: () => debounceMaxDelay,
     _mergeParams(prev, curr) {
-      const {
+      const [prevObj] = prev;
-        _sizeChanged: prevSizeChanged,
+      const [currObj] = curr;
-        _hostMutation: prevHostMutation,
+      return [
-        _contentMutation: prevContentMutation,
+        keys(prevObj)
-      } = prev[0];
+          .concat(keys(currObj))
-      const {
+          .reduce((obj, key) => {
-        _sizeChanged: currSizeChanged,
+            obj[key] = prevObj[key] || currObj[key];
-        _hostMutation: currvHostMutation,
+            return obj;
-        _contentMutation: currContentMutation,
+          }, {}),
-      } = curr[0];
+      ] as [Partial<StructureSetupUpdateHints>];
-      const merged: [Partial<StructureSetupUpdateHints>] = [
-        {
-          _sizeChanged: prevSizeChanged || currSizeChanged,
-          _hostMutation: prevHostMutation || currvHostMutation,
-          _contentMutation: prevContentMutation || currContentMutation,
-        },
-      ];
-
-      return merged;
     },
   });
 

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts

@@ -14,8 +14,8 @@ export interface StructureSetupState {
   _padding: TRBL;
   _paddingAbsolute: boolean;
   _viewportPaddingStyle: StyleObject;
-  _viewportOverflowScroll: XY<boolean>;
+  _overflowScroll: XY<boolean>;
-  _viewportOverflowAmount: WH<number>;
+  _overflowAmount: WH<number>;
   _heightIntrinsic: boolean;
   _directionIsRTL: boolean;
 }
@@ -48,11 +48,11 @@ const initialStructureSetupUpdateState: StructureSetupState = {
     paddingBottom: 0,
     paddingLeft: 0,
   },
-  _viewportOverflowAmount: {
+  _overflowAmount: {
     w: 0,
     h: 0,
   },
-  _viewportOverflowScroll: {
+  _overflowScroll: {
     x: false,
     y: false,
   },
@@ -67,8 +67,7 @@ export const createStructureSetup = (
   const checkOptionsFallback = createOptionCheck(options, {});
   const state = createState(initialStructureSetupUpdateState);
   const onUpdatedListeners = new Set<OnUpdatedListener>();
-  const [getUpdateState] = state;
+  const [getState] = state;
-
   const runOnUpdatedListeners = (
     updateHints: StructureSetupUpdateHints,
     changedOptions?: PartialOptions<OSOptions>,
@@ -87,7 +86,7 @@ export const createStructureSetup = (
     }
   );
 
-  const structureSetupState = getUpdateState.bind(0) as (() => StructureSetupState) &
+  const structureSetupState = getState.bind(0) as (() => StructureSetupState) &
     StructureSetupStaticState;
   structureSetupState._addOnUpdatedListener = (listener) => {
     onUpdatedListeners.add(listener);

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.update.ts

@@ -1,14 +1,4 @@
-import {
+import { each, isNumber, scrollLeft, scrollTop, assignDeep, keys } from 'support';
-  CacheValues,
-  each,
-  isNumber,
-  scrollLeft,
-  scrollTop,
-  assignDeep,
-  keys,
-  isBoolean,
-  isUndefined,
-} from 'support';
 import { getEnvironment } from 'environment';
 import {
   createTrinsicUpdate,
@@ -34,21 +24,15 @@ export type StructureSetupUpdate = (
 
 export interface StructureSetupUpdateHints {
   _sizeChanged: boolean;
-  _hostMutation: boolean;
-  _contentMutation: boolean;
-  _paddingStyleChanged: boolean;
   _directionChanged: boolean;
   _heightIntrinsicChanged: boolean;
   _overflowScrollChanged: boolean;
   _overflowAmountChanged: boolean;
+  _paddingStyleChanged: boolean;
+  _hostMutation: boolean;
+  _contentMutation: boolean;
 }
 
-const applyForceToCache = <T>(cacheValues: CacheValues<T>, force?: boolean): CacheValues<T> => [
-  cacheValues[0],
-  force || cacheValues[1],
-  cacheValues[2],
-];
-
 const prepareUpdateHints = <T extends StructureSetupUpdateHints>(
   leading: Required<T>,
   adaptive?: Partial<T>,
@@ -61,9 +45,7 @@ const prepareUpdateHints = <T extends StructureSetupUpdateHints>(
   each(objKeys, (key) => {
     const leadingValue = leading[key];
     const adaptiveValue = finalAdaptive[key];
-    result[key] = isBoolean(leadingValue)
+    result[key] = !!(force || leadingValue || adaptiveValue);
-      ? !!force || !!leadingValue || !!adaptiveValue
-      : applyForceToCache(leadingValue, force);
   });
 
   return result as Required<T>;
@@ -93,20 +75,15 @@ export const createStructureSetupUpdate = (
       assignDeep(
         {
           _sizeChanged: false,
-          _hostMutation: false,
-          _contentMutation: false,
           _paddingStyleChanged: false,
           _directionChanged: false,
           _heightIntrinsicChanged: false,
           _overflowScrollChanged: false,
           _overflowAmountChanged: false,
+          _hostMutation: false,
+          _contentMutation: false,
         },
-        Object.keys(updateHints).reduce((acc, key) => {
+        updateHints
-          if (!isUndefined(updateHints[key])) {
-            acc[key] = updateHints[key];
-          }
-          return acc;
-        }, {})
       ),
       {},
       force

packages/overlayscrollbars/src/setups/structureSetup/updateSegments/overflowUpdateSegment.ts

@@ -7,7 +7,6 @@ import {
   style,
   scrollSize,
   fractionalSize,
-  CacheValues,
   equalWH,
   addClass,
   removeClass,
@@ -29,11 +28,11 @@ interface ViewportOverflowState {
 }
 
 type UndoViewportArrangeResult = [
-  () => void, // redoViewportArrange
+  redoViewportArrange: () => void,
-  ViewportOverflowState?
+  overflowState?: ViewportOverflowState
 ];
 
-const { max, round } = Math;
+const { max } = Math;
 const overlaidScrollbarsHideOffset = 42;
 const whCacheOptions = {
   _equal: equalWH,
@@ -62,10 +61,10 @@ const setAxisOverflowStyle = (
     styleObj[overflowKey] = behavior;
   }
 
-  return {
+  return [behaviorIsVisible, behaviorIsVisibleHidden ? 'hidden' : 'scroll'] as [
-    _visible: behaviorIsVisible,
+    visible: boolean,
-    _behavior: behaviorIsVisibleHidden ? 'hidden' : 'scroll',
+    behavior: string
-  };
+  ];
 };
 
 const getOverflowAmount = (
@@ -73,15 +72,15 @@ const getOverflowAmount = (
   viewportClientSize: WH<number>,
   sizeFraction: WH<number>
 ) => {
-  const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0);
+  const tollerance = window.devicePixelRatio % 1 !== 0 ? 1 : 0;
   const amount = {
     w: max(0, viewportScrollSize.w - viewportClientSize.w - max(0, sizeFraction.w)),
     h: max(0, viewportScrollSize.h - viewportClientSize.h - max(0, sizeFraction.h)),
   };
 
   return {
-    w: condition(amount.w) ? amount.w : 0,
+    w: amount.w >= tollerance ? amount.w : 0,
-    h: condition(amount.h) ? amount.h : 0,
+    h: amount.h >= tollerance ? amount.h : 0,
   };
 };
 
@@ -135,19 +134,18 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
     if (heightIntrinsic) {
       const { _paddingAbsolute, _padding } = getState();
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
-      const hostCssHeight = parseFloat(style(_host, 'height'));
+      const fSize = fractionalSize(_host);
       const hostClientSize = clientSize(_host);
-      // const hostOffsetSize = offsetSize(_host);
+
       // padding subtraction is only needed if padding is absolute or if viewport is content-box
       const isContentBox = style(_viewport, 'boxSizing') === 'content-box';
       const paddingVertical = _paddingAbsolute || isContentBox ? _padding.b + _padding.t : 0;
-      const fractionalClientHeight = hostClientSize.h + (hostCssHeight - round(hostCssHeight));
-
       const subtractXScrollbar = !(_nativeScrollbarIsOverlaid.x && isContentBox);
 
       style(_viewport, {
         height:
-          fractionalClientHeight +
+          hostClientSize.h +
+          fSize.h +
           (_overflowScroll.x && subtractXScrollbar ? _scrollbarsHideOffset.x : 0) -
           paddingVertical,
       });
@@ -208,13 +206,13 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
     overflow: XY<OverflowBehavior>,
     viewportStyleObj: StyleObject
   ): ViewportOverflowState => {
-    const { _visible: xVisible, _behavior: xVisibleBehavior } = setAxisOverflowStyle(
+    const [xVisible, xVisibleBehavior] = setAxisOverflowStyle(
       true,
       overflowAmount.w,
       overflow.x,
       viewportStyleObj
     );
-    const { _visible: yVisible, _behavior: yVisibleBehavior } = setAxisOverflowStyle(
+    const [yVisible, yVisibleBehavior] = setAxisOverflowStyle(
       false,
       overflowAmount.h,
       overflow.y,
@@ -412,6 +410,7 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
     const { _heightIntrinsic, _directionIsRTL } = getState();
     const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
       checkOption<boolean>('nativeScrollbarsOverlaid.show');
+    const [overflow, overflowChanged] = checkOption<XY<OverflowBehavior>>('overflow');
     const showNativeOverlaidScrollbars =
       showNativeOverlaidScrollbarsOption &&
       _nativeScrollbarIsOverlaid.x &&
@@ -424,9 +423,9 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
         showNativeOverlaidScrollbarsChanged ||
         _heightIntrinsicChanged);
 
-    let sizeFractionCache: CacheValues<WH<number>> = getCurrentSizeFraction(force);
+    let sizeFractionCache = getCurrentSizeFraction(force);
-    let viewportScrollSizeCache: CacheValues<WH<number>> = getCurrentViewportScrollSizeCache(force);
+    let viewportScrollSizeCache = getCurrentViewportScrollSizeCache(force);
-    let overflowAmuntCache: CacheValues<WH<number>> = getCurrentOverflowAmountCache(force);
+    let overflowAmuntCache = getCurrentOverflowAmountCache(force);
     let preMeasureViewportOverflowState: ViewportOverflowState | undefined;
 
     if (showNativeOverlaidScrollbarsChanged && _nativeScrollbarStyling) {
@@ -495,10 +494,9 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
       );
     }
 
-    const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
-    const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
     const [overflowAmount, overflowAmountChanged] = overflowAmuntCache;
-    const [overflow, overflowChanged] = checkOption<XY<OverflowBehavior>>('overflow');
+    const [viewportScrollSize, viewportScrollSizeChanged] = viewportScrollSizeCache;
+    const [sizeFraction, sizeFractionChanged] = sizeFractionCache;
 
     if (
       _paddingStyleChanged ||
@@ -548,8 +546,8 @@ export const createOverflowUpdate: CreateStructureUpdateSegment = (
       style(_viewport, viewportStyle);
 
       setState({
-        _viewportOverflowScroll: overflowScroll,
+        _overflowScroll: overflowScroll,
-        _viewportOverflowAmount: overflowAmount,
+        _overflowAmount: overflowAmount,
       });
 
       return {

packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts

@@ -61,7 +61,7 @@ const getMetrics = (elm: HTMLElement): Metrics => {
   const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
   const comparisonEndBCR = getBoundingClientRect(elm!.querySelector('.end')!);
   const scrollMeasure = () => {
-    const condition = (raw: number) => (window.devicePixelRatio % 2 !== 0 ? raw > 1 : raw > 0);
+    const condition = (raw: number) => (window.devicePixelRatio % 1 !== 0 ? raw > 1 : raw > 0);
     const amount = {
       width: Math.max(0, comparison!.scrollWidth - comparison!.clientWidth),
       height: Math.max(0, comparison!.scrollHeight - comparison!.clientHeight),

packages/overlayscrollbars/types/overlayscrollbars.d.ts

@@ -116,10 +116,12 @@ onHostSizeChanged           : null, // gone
 interface OnUpdatedEventListenerArgs {
     updateHints: {
         sizeChanged: boolean;
-        hostMutation: boolean;
-        contentMutation: boolean;
         directionChanged: boolean;
         heightIntrinsicChanged: boolean;
+        overflowAmountChanged: boolean;
+        overflowScrollChanged: boolean;
+        hostMutation: boolean;
+        contentMutation: boolean;
     };
     changedOptions: PartialOptions<OSOptions>;
     force: boolean;