From 2704b66f69b5b8e5de6a3c5c22b118bd962dacde Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Sat, 16 Jul 2022 06:58:03 +0200
Subject: [PATCH] improve scrollbar interaction

---
 .../scrollbarsSetup.elements.ts               | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts
index 046b662..f233273 100644
--- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts
+++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts
@@ -9,6 +9,7 @@ import {
   removeClass,
   removeElements,
   runEachAndClear,
+  stopPropagation,
 } from 'support';
 import {
   classNameScrollbar,
@@ -59,6 +60,13 @@ export type ScrollbarsSetupElements = [
 
 const interactionStartEventNames = 'touchstart mouseenter';
 const interactionEndEventNames = 'touchend touchcancel mouseleave';
+const stopRootClickPropagation = (scrollbar: HTMLElement, documentElm: Document) =>
+  on(
+    scrollbar,
+    'mousedown',
+    on.bind(0, documentElm, 'click', stopPropagation, { _once: true, _capture: true }),
+    { _capture: true }
+  );
 
 export const createScrollbarsSetupElements = (
   target: InitializationTarget,
@@ -67,7 +75,7 @@ export const createScrollbarsSetupElements = (
   const { _getInitializationStrategy } = getEnvironment();
   const { _scrollbarsSlot: environmentScrollbarSlot } =
     _getInitializationStrategy() as ScrollbarsInitializationStrategy;
-  const { _target, _host, _viewport, _targetIsElm } = structureSetupElements;
+  const { _documentElm, _target, _host, _viewport, _targetIsElm } = structureSetupElements;
   const initializationScrollbarSlot =
     !_targetIsElm && (target as ScrollbarsInitialization).scrollbarsSlot;
   const evaluatedScrollbarSlot =
@@ -113,24 +121,19 @@ export const createScrollbarsSetupElements = (
     appendChildren(scrollbar, track);
     appendChildren(track, handle);
 
-    push(destroyFns, removeElements.bind(0, scrollbar));
     push(arrToPush, result);
-
-    push(
-      destroyFns,
+    push(destroyFns, [
+      removeElements.bind(0, scrollbar),
       on(scrollbar, interactionStartEventNames, () => {
         addRemoveClassHorizontal(classNamesScrollbarInteraction, true);
         addRemoveClassVertical(classNamesScrollbarInteraction, true);
-      })
-    );
-
-    push(
-      destroyFns,
+      }),
       on(scrollbar, interactionEndEventNames, () => {
         addRemoveClassHorizontal(classNamesScrollbarInteraction);
         addRemoveClassVertical(classNamesScrollbarInteraction);
-      })
-    );
+      }),
+      stopRootClickPropagation(scrollbar, _documentElm),
+    ]);
 
     return result;
   };