improve code

packages/overlayscrollbars/src/plugins/scrollbarsHidingPlugin/scrollbarsHidingPlugin.ts

@@ -252,7 +252,9 @@ export const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance> = {
           h: sizeNew.h - size.h,
         };
 
-        if (deltaSize.w === 0 && deltaSize.h === 0) return;
+        if (deltaSize.w === 0 && deltaSize.h === 0) {
+          return;
+        }
 
         const deltaAbsSize = {
           w: abs(deltaSize.w),

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

@@ -17,6 +17,7 @@ import {
   fractionalSize,
   isFunction,
   ResizeObserverConstructor,
+  closest,
 } from 'support';
 import { getEnvironment } from 'environment';
 import {
@@ -24,6 +25,7 @@ import {
   dataValueHostOverflowVisible,
   classNameViewport,
   classNameOverflowVisible,
+  classNameScrollbar,
 } from 'classnames';
 import { createSizeObserver, SizeObserverCallbackParams } from 'observers/sizeObserver';
 import { createTrinsicObserver } from 'observers/trinsicObserver';
@@ -231,9 +233,13 @@ export const createStructureSetupObservers = (
               const { target, attributeName } = mutation;
               const ignore =
                 !isNestedTarget && attributeName
-                  ? liesBetween(target as Element, hostSelector, viewportSelector)
+                  ? liesBetween(target, hostSelector, viewportSelector)
                   : false;
-              return ignore || !!ignoreMutationFromOptions(mutation);
+              return (
+                ignore ||
+                !!closest(target, `.${classNameScrollbar}`) || // ignore explicitely all scrollbar elements
+                !!ignoreMutationFromOptions(mutation)
+              );
             },
           }
         );

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

@@ -2,21 +2,25 @@ import { isString } from 'support/utils/types';
 import { each } from 'support/utils/array';
 import { keys } from 'support/utils/object';
 
+type ClassContainingElement = Node | Element | false | null | undefined;
+type ClassName = string | false | null | undefined;
+
 const rnothtmlwhite = /[^\x20\t\r\n\f]+/g;
 const classListAction = (
-  elm: Element | false | null | undefined,
+  elm: ClassContainingElement,
-  className: string | false | null | undefined,
+  className: ClassName,
   action: (elmClassList: DOMTokenList, clazz: string) => boolean | void
 ): boolean => {
+  const classList = elm && (elm as Element).classList;
   let clazz: string;
   let i = 0;
   let result = false;
 
-  if (elm && className && isString(className)) {
+  if (classList && className && isString(className)) {
     const classes: Array<string> = className.match(rnothtmlwhite) || [];
     result = classes.length > 0;
     while ((clazz = classes[i++])) {
-      result = !!action(elm.classList, clazz) && result;
+      result = !!action(classList, clazz) && result;
     }
   }
   return result;
@@ -27,20 +31,15 @@ const classListAction = (
  * @param elm The element.
  * @param className The class name(s).
  */
-export const hasClass = (
+export const hasClass = (elm: ClassContainingElement, className: ClassName): boolean =>
-  elm: Element | false | null | undefined,
+  classListAction(elm, className, (classList, clazz) => classList.contains(clazz));
-  className: string | false | null | undefined
-): boolean => classListAction(elm, className, (classList, clazz) => classList.contains(clazz));
 
 /**
  * Removes the given class name(s) from the given element.
  * @param elm The element.
  * @param className The class name(s) which shall be removed. (separated by spaces)
  */
-export const removeClass = (
+export const removeClass = (elm: ClassContainingElement, className: ClassName): void => {
-  elm: Element | false | null | undefined,
-  className: string | false | null | undefined
-): void => {
   classListAction(elm, className, (classList, clazz) => classList.remove(clazz));
 };
 
@@ -50,10 +49,7 @@ export const removeClass = (
  * @param className The class name(s) which shall be added. (separated by spaces)
  * @returns A function which removes the added class name(s).
  */
-export const addClass = (
+export const addClass = (elm: ClassContainingElement, className: ClassName): (() => void) => {
-  elm: Element | false | null | undefined,
-  className: string | false | null | undefined
-): (() => void) => {
   classListAction(elm, className, (classList, clazz) => classList.add(clazz));
   return removeClass.bind(0, elm, className);
 };
@@ -63,10 +59,7 @@ export const addClass = (
  * @param classNameA ClassName A.
  * @param classNameB ClassName B.
  */
-export const diffClass = (
+export const diffClass = (classNameA: ClassName, classNameB: ClassName) => {
-  classNameA: string | null | undefined,
-  classNameB: string | null | undefined
-) => {
   const classNameASplit = classNameA && classNameA.split(' ');
   const classNameBSplit = classNameB && classNameB.split(' ');
   const tempObj = {};

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

@@ -1,8 +1,8 @@
 import { isElement } from 'support/utils/types';
 import { push, from } from 'support/utils/array';
 
-type InputElementType = Element | Node | false | null | undefined;
+type InputElementType = Node | Element | Node | false | null | undefined;
-type OutputElementType = Element | null;
+type OutputElementType = Node | Element | null;
 
 const elmPrototype = Element.prototype;
 
@@ -74,7 +74,7 @@ const contents = (elm: InputElementType): ReadonlyArray<ChildNode> =>
  */
 const parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentElement : null);
 
-const closest = (elm: InputElementType, selector: string): OutputElementType => {
+export const closest = (elm: InputElementType, selector: string): OutputElementType => {
   if (isElement(elm)) {
     const closestFn = elmPrototype.closest;
     if (closestFn) {

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

@@ -15,29 +15,29 @@ export function each<T>(
   callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | unknown
 ): Array<T> | ReadonlyArray<T>;
 export function each<T>(
-  array: Array<T> | ReadonlyArray<T> | null | undefined,
+  array: Array<T> | ReadonlyArray<T> | false | null | undefined,
   callback: (value: T, indexOrKey: number, source: Array<T>) => boolean | unknown
-): Array<T> | ReadonlyArray<T> | null | undefined;
+): Array<T> | ReadonlyArray<T> | false | null | undefined;
 export function each<T>(
   arrayLikeObject: ArrayLike<T>,
   callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | unknown
 ): ArrayLike<T>;
 export function each<T>(
-  arrayLikeObject: ArrayLike<T> | null | undefined,
+  arrayLikeObject: ArrayLike<T> | false | null | undefined,
   callback: (value: T, indexOrKey: number, source: ArrayLike<T>) => boolean | unknown
-): ArrayLike<T> | null | undefined;
+): ArrayLike<T> | false | null | undefined;
 export function each(
   obj: PlainObject,
   callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown
 ): PlainObject;
 export function each(
-  obj: PlainObject | null | undefined,
+  obj: PlainObject | false | null | undefined,
   callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | unknown
-): PlainObject | null | undefined;
+): PlainObject | false | null | undefined;
 export function each<T>(
-  source: Array<T> | ArrayLike<T> | ReadonlyArray<T> | PlainObject | null | undefined,
+  source: Array<T> | ArrayLike<T> | ReadonlyArray<T> | PlainObject | false | null | undefined,
   callback: (value: T, indexOrKey: any, source: any) => boolean | unknown
-): Array<T> | ArrayLike<T> | ReadonlyArray<T> | PlainObject | null | undefined {
+): Array<T> | ArrayLike<T> | ReadonlyArray<T> | PlainObject | false | null | undefined {
   if (isArrayLike(source)) {
     for (let i = 0; i < source.length; i++) {
       if (callback(source[i], i, source) === false) {