optimize for ie11 and improve code

local/rollup/src/playwright/createPlaywrightRollupConfig.js

@@ -61,11 +61,17 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
       dist,
     },
     versions: [
-      {
-        format: 'esm',
-        generatedCode: 'es2015',
-        minifiedVersion: false,
-      },
+      mode === 'dev'
+        ? {
+            format: 'esm',
+            generatedCode: 'es2015',
+            minifiedVersion: false,
+          }
+        : {
+            format: 'iife',
+            generatedCode: 'es5',
+            minifiedVersion: false,
+          },
     ],
     extractStyle: false,
     rollup: {

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts

@@ -103,11 +103,13 @@ const createInteractiveScrollEvents = (
   const { _rtlScrollBehavior } = getEnvironment();
   const { _handle, _track, _scrollbar } = scrollbarStructure;
   const scrollLeftTopKey = `scroll${isHorizontal ? 'Left' : 'Top'}`;
+  const clientXYKey = `client${isHorizontal ? 'X' : 'Y'}`; // for pointer event (can't use xy because of IE11)
   const widthHeightKey = isHorizontal ? 'width' : 'height';
+  const leftTopKey = isHorizontal ? 'left' : 'top'; // for BCR (can't use xy because of IE11)
   const whKey = isHorizontal ? 'w' : 'h';
   const xyKey = isHorizontal ? 'x' : 'y';
   const getHandleOffset = (handleRect: DOMRect, trackRect: DOMRect) =>
-    handleRect[xyKey] - trackRect[xyKey];
+    handleRect[leftTopKey] - trackRect[leftTopKey];
   const createRelativeHandleMove =
     (mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => {
       const { _overflowAmount } = structureSetupState();
@@ -131,12 +133,12 @@ const createInteractiveScrollEvents = (
         scrollOffsetElement[scrollLeftTopKey] || 0,
         1 / getScale(scrollOffsetElement)[xyKey]
       );
-      const pointerDownOffset = pointerDownEvent[xyKey];
+      const pointerDownOffset = pointerDownEvent[clientXYKey];
       const handleRect = getBoundingClientRect(_handle);
       const trackRect = getBoundingClientRect(_track);
       const handleLength = handleRect[widthHeightKey];
       const handleCenter = getHandleOffset(handleRect, trackRect) + handleLength / 2;
-      const relativeTrackPointerOffset = pointerDownOffset - trackRect[xyKey];
+      const relativeTrackPointerOffset = pointerDownOffset - trackRect[leftTopKey];
       const startOffset = isDragScroll ? 0 : relativeTrackPointerOffset - handleCenter;
 
       const offFns = [
@@ -144,7 +146,7 @@ const createInteractiveScrollEvents = (
           _passive: false,
         }),
         on(_track, 'pointermove', (pointerMoveEvent: PointerEvent) => {
-          const relativeMovement = pointerMoveEvent[xyKey] - pointerDownOffset;
+          const relativeMovement = pointerMoveEvent[clientXYKey] - pointerDownOffset;
 
           if (isDragScroll || instantClickScroll) {
             moveHandleRelative(startOffset + relativeMovement);

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -135,10 +135,17 @@ if (!useContentElement) {
 const initObj = hasClass(document.body, 'tvp')
   ? {
       target: target!,
-      viewport: target!,
-      content: useContentElement,
+      elements: {
+        viewport: target!,
+        content: useContentElement,
+      },
     }
-  : { target: target!, content: useContentElement };
+  : {
+      target: target!,
+      elements: {
+        content: useContentElement,
+      },
+    };
 
 let updateCount = 0;
 // @ts-ignore