improve code

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -33,7 +33,12 @@ const heightIntrinsicCacheValuesFallback: CacheValues<boolean> = {
 
 export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => {
   const { _host, _viewport, _content } = structureSetup._targetObj;
-  const environment: Environment = getEnvironment();
+  const {
+    _nativeScrollbarStyling,
+    _flexboxGlue,
+    _addListener: addEnvironmentListener,
+    _removeListener: removeEnvironmentListener,
+  } = getEnvironment();
   const lifecycles: LifecycleUpdateFunction[] = [];
   const instance: LifecycleHub = {
     _options: options,
@@ -99,7 +104,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
     });
   };
 
-  const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: true });
+  const sizeObserver = createSizeObserver(_host, onSizeChanged, { _appear: true, _direction: !_nativeScrollbarStyling });
   const trinsicObserver = createTrinsicObserver(_host, onTrinsicChanged);
   const hostMutationObserver = createDOMObserver(_host, onHostMutation, {
     _styleChangingAttributes: attrs,
@@ -131,14 +136,14 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
     runLifecycles(null, changedOptions, force);
   };
   const envUpdateListener = updateAll.bind(null, null, true);
-  environment._addListener(envUpdateListener);
+  addEnvironmentListener(envUpdateListener);
 
-  console.log('flexboxglue', environment._flexboxGlue);
+  console.log('flexboxGlue', _flexboxGlue);
 
   return {
     _update: updateAll,
     _destroy() {
-      environment._removeListener(envUpdateListener);
+      removeEnvironmentListener(envUpdateListener);
     },
   };
 };

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -74,7 +74,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp
     const scrollY = viewportStyleObj.overflowY === 'scroll';
     const horizontalMarginKey = directionIsRTL ? 'marginLeft' : 'marginRight';
     const horizontalBorderKey = directionIsRTL ? 'borderLeft' : 'borderRight';
-    const scrollXY = scrollY && scrollX;
     const overlaidHideOffset = _content && !showNativeOverlaidScrollbars ? overlaidScrollbarsHideOffset : 0;
     const scrollbarsHideOffset = {
       x: overlaidX ? overlaidHideOffset : _nativeScrollbarSize.x,
@@ -95,10 +94,9 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp
       }
 
       if (_contentArrange) {
-        const condition = scrollXY && !showNativeOverlaidScrollbars;
         style(_contentArrange, {
-          width: condition ? `${overlaidHideOffset + contentScrollSize.w}px` : '',
-          height: condition ? `${overlaidHideOffset + contentScrollSize.h}px` : '',
+          width: scrollY && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.w}px` : '',
+          height: scrollX && !showNativeOverlaidScrollbars ? `${overlaidHideOffset + contentScrollSize.h}px` : '',
         });
       }
     }
@@ -226,6 +224,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): LifecycleUp
       // TODO: enlargen viewport if div too small for firefox scrollbar hiding behavior
       // TODO: Test without content
       // TODO: Test without padding
+      // TODO: hide host || padding overflow if scroll x or y
 
       style(_viewport, viewportStyle);
       style(_content, contentStyle);

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

@@ -7,6 +7,10 @@ const targetElm = document.querySelector('#target') as HTMLElement;
 window.os = OverlayScrollbars(targetElm);
 
 export const resize = (element: HTMLElement) => {
+  const strMouseTouchDownEvent = 'mousedown touchstart';
+  const strMouseTouchUpEvent = 'mouseup touchend';
+  const strMouseTouchMoveEvent = 'mousemove touchmove';
+  const strSelectStartEvent = 'selectstart';
   const dragStartSize: WH<number> = { w: 0, h: 0 };
   const dragStartPosition: XY<number> = { x: 0, y: 0 };
   const resizeBtn = createDiv('resizeBtn');
@@ -21,30 +25,37 @@ export const resize = (element: HTMLElement) => {
     return false;
   };
 
-  const resizerResize = (event: MouseEvent) => {
+  const resizerResize = (event: MouseEvent | TouchEvent) => {
+    const isTouchEvent = (event as TouchEvent).touches !== undefined;
+    const mouseOffsetHolder = isTouchEvent ? (event as TouchEvent).touches[0] : (event as MouseEvent);
+
     const sizeStyle = {
-      width: dragStartSize.w + event.pageX - dragStartPosition.x,
-      height: dragStartSize.h + event.pageY - dragStartPosition.y,
+      width: dragStartSize.w + mouseOffsetHolder.pageX - dragStartPosition.x,
+      height: dragStartSize.h + mouseOffsetHolder.pageY - dragStartPosition.y,
     };
 
     style(dragResizer, sizeStyle);
     event.stopPropagation();
   };
 
-  const resizerResized = (event: MouseEvent) => {
-    off(document, 'selectstart', onSelectStart);
-    off(document, 'mousemove', resizerResize);
-    off(document, 'mouseup', resizerResized);
+  const resizerResized = () => {
+    off(document, strSelectStartEvent, onSelectStart);
+    off(document, strMouseTouchMoveEvent, resizerResize);
+    off(document, strMouseTouchUpEvent, resizerResized);
 
     dragResizer = undefined;
     dragResizeBtn = undefined;
   };
 
-  on(resizeBtn, 'mousedown', (event: MouseEvent) => {
+  on(resizeBtn, strMouseTouchDownEvent, (event: MouseEvent | TouchEvent) => {
     const { currentTarget } = event;
-    if (event.buttons === 1 || event.which === 1) {
-      dragStartPosition.x = event.pageX;
-      dragStartPosition.y = event.pageY;
+    const correctButton = (event as MouseEvent).buttons === 1 || event.which === 1;
+    const isTouchEvent = (event as TouchEvent).touches !== undefined;
+    const mouseOffsetHolder = isTouchEvent ? (event as TouchEvent).touches[0] : (event as MouseEvent);
+
+    if (correctButton || isTouchEvent) {
+      dragStartPosition.x = mouseOffsetHolder.pageX;
+      dragStartPosition.y = mouseOffsetHolder.pageY;
 
       dragResizeBtn = currentTarget as HTMLElement;
       dragResizer = parent(currentTarget as HTMLElement) as HTMLElement;
@@ -53,9 +64,9 @@ export const resize = (element: HTMLElement) => {
       dragStartSize.w = cSize.w;
       dragStartSize.h = cSize.h;
 
-      on(document, 'selectstart', onSelectStart);
-      on(document, 'mousemove', resizerResize);
-      on(document, 'mouseup', resizerResized);
+      on(document, strSelectStartEvent, onSelectStart);
+      on(document, strMouseTouchMoveEvent, resizerResize);
+      on(document, strMouseTouchUpEvent, resizerResized);
 
       event.preventDefault();
       event.stopPropagation();