improve intialization to body and fix showNativeOverlaidScrollbars option

packages/overlayscrollbars/src/classnames.ts

@@ -3,6 +3,7 @@ export const classNameEnvironmentFlexboxGlue = `${classNameEnvironment}-flexbox-
 export const classNameEnvironmentFlexboxGlueMax = `${classNameEnvironmentFlexboxGlue}-max`;
 
 export const dataAttributeHost = 'data-overlayscrollbars';
+export const dataAttributeInitialize = 'data-overlayscrollbars-initialize';
 export const dataAttributeHostOverflowX = `${dataAttributeHost}-overflow-x`;
 export const dataAttributeHostOverflowY = `${dataAttributeHost}-overflow-y`;
 export const dataValueHostOverflowVisible = 'overflowVisible';
@@ -24,18 +25,19 @@ export const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverLi
 
 export const classNameTrinsicObserver = 'os-trinsic-observer';
 
+export const classNameScrollbarThemeNone = 'os-theme-none';
 export const classNameScrollbar = 'os-scrollbar';
 export const classNameScrollbarRtl = `${classNameScrollbar}-rtl`;
 export const classNameScrollbarHorizontal = `${classNameScrollbar}-horizontal`;
 export const classNameScrollbarVertical = `${classNameScrollbar}-vertical`;
 export const classNameScrollbarTrack = `${classNameScrollbar}-track`;
 export const classNameScrollbarHandle = `${classNameScrollbar}-handle`;
-export const classNamesScrollbarVisible = `${classNameScrollbar}-visible`;
+export const classNameScrollbarVisible = `${classNameScrollbar}-visible`;
-export const classNamesScrollbarCornerless = `${classNameScrollbar}-cornerless`;
+export const classNameScrollbarCornerless = `${classNameScrollbar}-cornerless`;
-export const classNamesScrollbarTransitionless = `${classNameScrollbar}-transitionless`;
+export const classNameScrollbarTransitionless = `${classNameScrollbar}-transitionless`;
-export const classNamesScrollbarInteraction = `${classNameScrollbar}-interaction`;
+export const classNameScrollbarInteraction = `${classNameScrollbar}-interaction`;
-export const classNamesScrollbarUnusable = `${classNameScrollbar}-unusable`;
+export const classNameScrollbarUnusable = `${classNameScrollbar}-unusable`;
-export const classNamesScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`;
+export const classNameScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`;
-export const classNamesScrollbarWheel = `${classNameScrollbar}-wheel`;
+export const classNameScrollbarWheel = `${classNameScrollbar}-wheel`;
-export const classNamesScrollbarTrackInteractive = `${classNameScrollbarTrack}-interactive`;
+export const classNameScrollbarTrackInteractive = `${classNameScrollbarTrack}-interactive`;
-export const classNamesScrollbarHandleInteractive = `${classNameScrollbarHandle}-interactive`;
+export const classNameScrollbarHandleInteractive = `${classNameScrollbarHandle}-interactive`;

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

@@ -19,7 +19,7 @@ import {
   classNameScrollbarVertical,
   classNameScrollbarTrack,
   classNameScrollbarHandle,
-  classNamesScrollbarTransitionless,
+  classNameScrollbarTransitionless,
 } from '~/classnames';
 import { getEnvironment } from '~/environment';
 import { dynamicInitializationElement as generalDynamicInitializationElement } from '~/initialization';
@@ -79,13 +79,26 @@ export const createScrollbarsSetupElements = (
   const { _getDefaultInitialization } = getEnvironment();
   const { scrollbars: defaultInitScrollbars } = _getDefaultInitialization();
   const { slot: defaultInitScrollbarsSlot } = defaultInitScrollbars;
-  const { _documentElm, _target, _host, _viewport, _targetIsElm, _scrollOffsetElement } =
+  const {
-    structureSetupElements;
+    _documentElm,
+    _target,
+    _host,
+    _viewport,
+    _targetIsElm,
+    _scrollOffsetElement,
+    _isBody,
+    _viewportIsTarget,
+  } = structureSetupElements;
   const { scrollbars: scrollbarsInit } = (_targetIsElm ? {} : target) as InitializationTargetObject;
   const { slot: initScrollbarsSlot } = scrollbarsInit || {};
   const evaluatedScrollbarSlot = generalDynamicInitializationElement<
     [InitializationTargetElement, HTMLElement, HTMLElement]
-  >([_target, _host, _viewport], () => _host, defaultInitScrollbarsSlot, initScrollbarsSlot);
+  >(
+    [_target, _host, _viewport],
+    () => (_viewportIsTarget && _isBody ? _target : _host),
+    defaultInitScrollbarsSlot,
+    initScrollbarsSlot
+  );
   const scrollbarStructureAddRemoveClass = (
     scrollbarStructures: ScrollbarStructure[],
     classNames: string | false | null | undefined,
@@ -181,7 +194,7 @@ export const createScrollbarsSetupElements = (
       ? classNameScrollbarHorizontal
       : classNameScrollbarVertical;
     const arrToPush = isHorizontal ? horizontalScrollbars : verticalScrollbars;
-    const transitionlessClass = isEmptyArray(arrToPush) ? classNamesScrollbarTransitionless : '';
+    const transitionlessClass = isEmptyArray(arrToPush) ? classNameScrollbarTransitionless : '';
     const scrollbar = createDiv(
       `${classNameScrollbar} ${scrollbarClassName} ${transitionlessClass}`
     );
@@ -218,7 +231,7 @@ export const createScrollbarsSetupElements = (
     appendChildren(evaluatedScrollbarSlot, verticalScrollbars[0]._scrollbar);
 
     setT(() => {
-      scrollbarsAddRemoveClass(classNamesScrollbarTransitionless);
+      scrollbarsAddRemoveClass(classNameScrollbarTransitionless);
     }, 300);
   };
 

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

@@ -15,8 +15,8 @@ import { getPlugins, clickScrollPluginName } from '~/plugins';
 import { getEnvironment } from '~/environment';
 import {
   classNameScrollbarHandle,
-  classNamesScrollbarInteraction,
+  classNameScrollbarInteraction,
-  classNamesScrollbarWheel,
+  classNameScrollbarWheel,
 } from '~/classnames';
 import type { XY } from '~/support';
 import type { ClickScrollPluginInstance } from '~/plugins';
@@ -187,10 +187,10 @@ export const createScrollbarsSetupEvents =
 
     return runEachAndClear.bind(0, [
       on(_scrollbar, 'pointerenter', () => {
-        scrollbarsAddRemoveClass(classNamesScrollbarInteraction, true);
+        scrollbarsAddRemoveClass(classNameScrollbarInteraction, true);
       }),
       on(_scrollbar, 'pointerleave pointercancel', () => {
-        scrollbarsAddRemoveClass(classNamesScrollbarInteraction);
+        scrollbarsAddRemoveClass(classNameScrollbarInteraction);
       }),
       on(
         _scrollbar,
@@ -208,10 +208,10 @@ export const createScrollbarsSetupEvents =
           }
 
           wheelScrollBy = false;
-          scrollbarsAddRemoveClass(classNamesScrollbarWheel, true);
+          scrollbarsAddRemoveClass(classNameScrollbarWheel, true);
           wheelTimeout(() => {
             wheelScrollBy = true;
-            scrollbarsAddRemoveClass(classNamesScrollbarWheel);
+            scrollbarsAddRemoveClass(classNameScrollbarWheel);
           });
 
           preventDefault(wheelEvent);

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

@@ -1,14 +1,16 @@
 import { on, runEachAndClear, parent, scrollLeft, scrollTop, selfClearTimeout } from '~/support';
+import { getEnvironment } from '~/environment';
 import { createState, createOptionCheck } from '~/setups/setups';
 import { createScrollbarsSetupEvents } from '~/setups/scrollbarsSetup/scrollbarsSetup.events';
 import { createScrollbarsSetupElements } from '~/setups/scrollbarsSetup/scrollbarsSetup.elements';
 import {
-  classNamesScrollbarVisible,
+  classNameScrollbarThemeNone,
-  classNamesScrollbarUnusable,
+  classNameScrollbarVisible,
-  classNamesScrollbarCornerless,
+  classNameScrollbarUnusable,
-  classNamesScrollbarAutoHidden,
+  classNameScrollbarCornerless,
-  classNamesScrollbarHandleInteractive,
+  classNameScrollbarAutoHidden,
-  classNamesScrollbarTrackInteractive,
+  classNameScrollbarHandleInteractive,
+  classNameScrollbarTrackInteractive,
   classNameScrollbarRtl,
 } from '~/classnames';
 import type {
@@ -73,7 +75,7 @@ export const createScrollbarsSetup = (
   const {
     _horizontal,
     _vertical,
-    _scrollbarsAddRemoveClass: scrollbarsAddRemoveClass,
+    _scrollbarsAddRemoveClass,
     _refreshScrollbarsHandleLength,
     _refreshScrollbarsHandleOffset,
   } = elements;
@@ -94,9 +96,9 @@ export const createScrollbarsSetup = (
   const manageScrollbarsAutoHide = (removeAutoHide: boolean, delayless?: boolean) => {
     clearAutoTimeout();
     if (removeAutoHide) {
-      scrollbarsAddRemoveClass(classNamesScrollbarAutoHidden);
+      _scrollbarsAddRemoveClass(classNameScrollbarAutoHidden);
     } else {
-      const hide = () => scrollbarsAddRemoveClass(classNamesScrollbarAutoHidden, true);
+      const hide = () => _scrollbarsAddRemoveClass(classNameScrollbarAutoHidden, true);
       if (globalAutoHideDelay > 0 && !delayless) {
         auotHideTimeout(hide);
       } else {
@@ -162,9 +164,12 @@ export const createScrollbarsSetup = (
         _overflowStyleChanged,
         _directionChanged,
       } = structureUpdateHints;
+      const { _nativeScrollbarsOverlaid } = getEnvironment();
       const checkOption = createOptionCheck(options, changedOptions, force);
       const currStructureSetupState = structureSetupState();
       const { _overflowAmount, _overflowStyle, _directionIsRTL } = currStructureSetupState;
+      const [showNativeOverlaidScrollbarsOption, showNativeOverlaidScrollbarsChanged] =
+        checkOption<boolean>('showNativeOverlaidScrollbars');
       const [theme, themeChanged] = checkOption<string | null>('scrollbars.theme');
       const [visibility, visibilityChanged] =
         checkOption<ScrollbarsVisibilityBehavior>('scrollbars.visibility');
@@ -174,22 +179,28 @@ export const createScrollbarsSetup = (
       const [dragScroll, dragScrollChanged] = checkOption<boolean>('scrollbars.dragScroll');
       const [clickScroll, clickScrollChanged] = checkOption<boolean>('scrollbars.clickScroll');
 
-      const updateHandle =
+      const updateHandle = _overflowEdgeChanged || _overflowAmountChanged || _directionChanged;
-        _overflowEdgeChanged || _overflowAmountChanged || _directionChanged || force;
+      const updateVisibility = _overflowStyleChanged || visibilityChanged;
-      const updateVisibility = _overflowStyleChanged || visibilityChanged || force;
+      const showNativeOverlaidScrollbars =
+        showNativeOverlaidScrollbarsOption &&
+        _nativeScrollbarsOverlaid.x &&
+        _nativeScrollbarsOverlaid.y;
 
       const setScrollbarVisibility = (overflowStyle: OverflowStyle, isHorizontal: boolean) => {
         const isVisible =
           visibility === 'visible' || (visibility === 'auto' && overflowStyle === 'scroll');
-        scrollbarsAddRemoveClass(classNamesScrollbarVisible, isVisible, isHorizontal);
+        _scrollbarsAddRemoveClass(classNameScrollbarVisible, isVisible, isHorizontal);
         return isVisible;
       };
 
       globalAutoHideDelay = autoHideDelay;
 
+      if (showNativeOverlaidScrollbarsChanged) {
+        _scrollbarsAddRemoveClass(classNameScrollbarThemeNone, showNativeOverlaidScrollbars);
+      }
       if (themeChanged) {
-        scrollbarsAddRemoveClass(prevTheme);
+        _scrollbarsAddRemoveClass(prevTheme);
-        scrollbarsAddRemoveClass(theme, true);
+        _scrollbarsAddRemoveClass(theme, true);
 
         prevTheme = theme;
       }
@@ -200,25 +211,25 @@ export const createScrollbarsSetup = (
         manageScrollbarsAutoHide(!autoHideNotNever, true);
       }
       if (dragScrollChanged) {
-        scrollbarsAddRemoveClass(classNamesScrollbarHandleInteractive, dragScroll);
+        _scrollbarsAddRemoveClass(classNameScrollbarHandleInteractive, dragScroll);
       }
       if (clickScrollChanged) {
-        scrollbarsAddRemoveClass(classNamesScrollbarTrackInteractive, clickScroll);
+        _scrollbarsAddRemoveClass(classNameScrollbarTrackInteractive, clickScroll);
       }
       if (updateVisibility) {
         const xVisible = setScrollbarVisibility(_overflowStyle.x, true);
         const yVisible = setScrollbarVisibility(_overflowStyle.y, false);
         const hasCorner = xVisible && yVisible;
 
-        scrollbarsAddRemoveClass(classNamesScrollbarCornerless, !hasCorner);
+        _scrollbarsAddRemoveClass(classNameScrollbarCornerless, !hasCorner);
       }
       if (updateHandle) {
         _refreshScrollbarsHandleLength(currStructureSetupState);
         _refreshScrollbarsHandleOffset(currStructureSetupState);
 
-        scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.x, true);
+        _scrollbarsAddRemoveClass(classNameScrollbarUnusable, !_overflowAmount.x, true);
-        scrollbarsAddRemoveClass(classNamesScrollbarUnusable, !_overflowAmount.y, false);
+        _scrollbarsAddRemoveClass(classNameScrollbarUnusable, !_overflowAmount.y, false);
-        scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody);
+        _scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody);
       }
     },
     scrollbarsSetupState,

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

@@ -24,6 +24,7 @@ import {
 } from '~/support';
 import {
   dataAttributeHost,
+  dataAttributeInitialize,
   dataAttributeHostOverflowX,
   dataAttributeHostOverflowY,
   classNamePadding,
@@ -146,15 +147,20 @@ export const createStructureSetupElements = (
   const viewportIsContentContent = defaultContentElementPresent
     ? possibleContentElement
     : generateContentElement();
-  const viewportElement = viewportIsContent ? viewportIstContentViewport : possibleViewportElement;
+  const nonBodyViewportElement = viewportIsContent
+    ? viewportIstContentViewport
+    : possibleViewportElement;
+  const viewportElement = viewportIsTargetBody ? docElement : nonBodyViewportElement;
+  const nonBodyHostElement = isTextarea
+    ? staticInitializationElement(createNewDiv, defaultHostInitialization, hostInitialization)
+    : (targetElement as HTMLElement);
+  const hostElement = viewportIsTargetBody ? viewportElement : nonBodyHostElement;
   const contentElement = viewportIsContent ? viewportIsContentContent : possibleContentElement;
   const activeElm = ownerDocument.activeElement;
   const setViewportFocus = !viewportIsTarget && wnd.top === wnd && activeElm === targetElement;
   const evaluatedTargetObj: StructureSetupElementsObj = {
     _target: targetElement,
-    _host: isTextarea
+    _host: hostElement,
-      ? staticInitializationElement(createNewDiv, defaultHostInitialization, hostInitialization)
-      : (targetElement as HTMLElement),
     _viewport: viewportElement,
     _padding:
       !viewportIsTarget &&
@@ -196,10 +202,13 @@ export const createStructureSetupElements = (
   const { _target, _host, _padding, _viewport, _content, _viewportArrange } = evaluatedTargetObj;
   const destroyFns: (() => any)[] = [
     () => {
-      // always remove dataAttributeHost from host and from <html> element if target is body
+      // always remove dataAttributeHost & dataAttributeInitialize from host and from <html> element if target is body
       removeAttr(_host, dataAttributeHost);
+      removeAttr(_host, dataAttributeInitialize);
+      removeAttr(_target, dataAttributeInitialize);
       if (isBody) {
         removeAttr(docElement, dataAttributeHost);
+        removeAttr(docElement, dataAttributeInitialize);
       }
     },
   ];
@@ -211,16 +220,17 @@ export const createStructureSetupElements = (
           (elm) => elementIsGenerated(elm) === false
         )
       );
-  const contentSlot = _content || _viewport;
+  const contentSlot = viewportIsTargetBody ? _target : _content || _viewport;
   const appendElements = () => {
     attr(_host, dataAttributeHost, viewportIsTarget ? 'viewport' : 'host');
 
     const removePaddingClass = addClass(_padding, classNamePadding);
     const removeViewportClass = addClass(_viewport, !viewportIsTarget && classNameViewport);
     const removeContentClass = addClass(_content, classNameContent);
-    const removeHtmlClass = isBody
+    const removeHtmlClass =
-      ? addClass(parent(targetElement), classNameViewportScrollbarHidden)
+      isBody && !viewportIsTarget
-      : noop;
+        ? addClass(parent(targetElement), classNameViewportScrollbarHidden)
+        : noop;
 
     // only insert host for textarea after target if it was generated
     if (isTextareaHostGenerated) {

packages/overlayscrollbars/src/styles/structure.scss

@@ -63,7 +63,6 @@
 }
 [data-overlayscrollbars-initialize],
 [data-overlayscrollbars~='scrollbarHidden'],
-html.os-viewport-scrollbar-hidden,
 .os-viewport-scrollbar-hidden.os-environment,
 .os-viewport-scrollbar-hidden.os-viewport {
   scrollbar-width: none !important;
@@ -72,30 +71,39 @@ html.os-viewport-scrollbar-hidden,
 [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
-html.os-viewport-scrollbar-hidden::-webkit-scrollbar,
-html.os-viewport-scrollbar-hidden::-webkit-scrollbar-corner,
 .os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,
 .os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,
 .os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,
 .os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner {
+  appearance: none !important;
   display: none !important;
-  width: 0px !important;
+  width: 0 !important;
-  height: 0px !important;
+  height: 0 !important;
-  visibility: hidden !important;
+}
-  background: transparent !important;
+
+/**
+ * elements wont suddenly crop after initialization is done
+ */
+
+[data-overlayscrollbars-initialize] {
+  overflow: auto;
 }
 
 /**
  * applied to body 
  */
 
+html[data-overlayscrollbars],
 html.os-viewport-scrollbar-hidden,
-html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
+html.os-viewport-scrollbar-hidden > body {
   box-sizing: border-box;
   margin: 0;
   width: 100%;
   height: 100%;
 }
+html[data-overlayscrollbars] > body {
+  overflow: visible;
+}
 
 /**
  * structure setup 
@@ -143,22 +151,22 @@ html.os-viewport-scrollbar-hidden > body[data-overlayscrollbars] {
 
 [data-overlayscrollbars~='host'],
 [data-overlayscrollbars~='viewport'] {
-  overflow: hidden !important;
+  overflow: hidden;
 }
 [data-overlayscrollbars~='overflowVisible'] {
-  overflow: visible !important;
+  overflow: visible;
 }
 [data-overlayscrollbars-overflow-x='hidden'] {
-  overflow-x: hidden !important;
+  overflow-x: hidden;
 }
 [data-overlayscrollbars-overflow-x='scroll'] {
-  overflow-x: scroll !important;
+  overflow-x: scroll;
 }
 [data-overlayscrollbars-overflow-x='hidden'] {
-  overflow-y: hidden !important;
+  overflow-y: hidden;
 }
 [data-overlayscrollbars-overflow-y='scroll'] {
-  overflow-y: scroll !important;
+  overflow-y: scroll;
 }
 
 .os-padding,

packages/overlayscrollbars/test/jest-jsdom/setups/scrollbarsSetup/scrollbarsSetup.elements.test.ts

@@ -6,7 +6,7 @@ import {
   classNameScrollbarVertical,
   classNameScrollbarTrack,
   classNameScrollbarHandle,
-  classNamesScrollbarTransitionless,
+  classNameScrollbarTransitionless,
 } from '~/classnames';
 import type { StructureSetupElementsObj } from '~/setups/structureSetup/structureSetup.elements';
 import type {
@@ -93,7 +93,7 @@ const assertCorrectDOMStructure = (
     expect(_track.classList.length).toBe(1);
     expect(_handle.classList.length).toBe(1);
     if (isMainStructure) {
-      expect(domScrollbar.classList.contains(classNamesScrollbarTransitionless)).toBe(true);
+      expect(domScrollbar.classList.contains(classNameScrollbarTransitionless)).toBe(true);
     }
 
     // structure
@@ -348,7 +348,7 @@ describe('scrollbarsSetup.elements', () => {
       expected: boolean
     ) => {
       const { _scrollbar } = setupElement._scrollbarStructures[0];
-      expect(_scrollbar.classList.contains(classNamesScrollbarTransitionless)).toBe(expected);
+      expect(_scrollbar.classList.contains(classNameScrollbarTransitionless)).toBe(expected);
     };
 
     testHasTransitionlessClass(elements._horizontal, true);

packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts

@@ -2,6 +2,7 @@ import { hasClass, is, isHTMLElement } from '~/support';
 import { resolveInitialization } from '~/initialization';
 import {
   dataAttributeHost,
+  dataAttributeInitialize,
   classNamePadding,
   classNameViewport,
   classNameContent,
@@ -112,7 +113,7 @@ const assertCorrectDOMStructure = (
 ) => {
   const { target, host, padding, viewport, content, children } = getElements(targetType);
   const { _getDefaultInitialization } = env;
-  const { _viewportIsTarget, _viewportIsContent, _viewport, _content } = elements;
+  const { _viewportIsTarget, _viewportIsContent, _viewport, _content, _isBody } = elements;
 
   expect(children).toBeDefined();
   expect((_content || _viewport).contains(children)).toBe(true);
@@ -121,7 +122,12 @@ const assertCorrectDOMStructure = (
     expect(host.getAttribute(dataAttributeHost)).toBe('viewport');
     expect(_viewportIsContent).toBe(false);
 
-    expect(target).toBe(host);
+    if (_isBody) {
+      expect(target.parentElement).toBe(host);
+    } else {
+      expect(target).toBe(host);
+    }
+
     expect(host).toBeTruthy();
     expect(padding).toBeFalsy();
     expect(viewport).toBeFalsy();
@@ -228,7 +234,11 @@ const assertCorrectSetupElements = (
   }
 
   if (_viewportIsTarget) {
-    expect(_viewport).toBe(_target);
+    if (isBody) {
+      expect(_viewport).toBe(_target.parentElement);
+    } else {
+      expect(_viewport).toBe(_target);
+    }
   } else if (viewport || _viewport) {
     expect(_viewport).toBe(viewport);
   } else {
@@ -413,8 +423,8 @@ const assertCorrectSetupElements = (
 
   _viewportAddRemoveClass(className, attrName, true);
   if (_viewportIsTarget) {
-    expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(true);
     expect(_viewportHasClass('', attrName)).toBe(true);
+    expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(true);
   } else {
     expect(hasClass(_viewport, className)).toBe(true);
     expect(_viewportHasClass(className, '')).toBe(true);
@@ -1294,9 +1304,13 @@ describe('structureSetup.elements', () => {
                     currEnv
                   );
                   expect(elements._viewportIsTarget).toBe(true);
-                  expect(elements._host).toBe(elements._target);
+                  expect(elements._host).toBe(
+                    elements._isBody ? elements._target.parentElement : elements._target
+                  );
                   expect(elements._padding).toBeFalsy();
-                  expect(elements._viewport).toBe(elements._target);
+                  expect(elements._viewport).toBe(
+                    elements._isBody ? elements._target.parentElement : elements._target
+                  );
                   expect(elements._content).toBeFalsy();
 
                   assertCorrectDOMStructure(targetType, currEnv, elements);
@@ -1356,34 +1370,34 @@ describe('structureSetup.elements', () => {
     });
   });
 
-  describe('data-overlayscrollbars attribute', () => {
+  describe('data-overlayscrollbars-initialize attribute', () => {
-    test('already set data-overlayscrollbars attribute is removed', () => {
+    test('already set data-overlayscrollbars-initialize attribute is removed', () => {
       const target = document.body;
-      target.setAttribute(dataAttributeHost, '');
+      target.setAttribute(dataAttributeInitialize, '');
 
       const { destroy } = createStructureSetupElementsProxy(target);
       destroy();
 
-      expect(document.body.getAttribute(dataAttributeHost)).toBe(null);
+      expect(document.body.getAttribute(dataAttributeInitialize)).toBe(null);
     });
 
-    test('already set data-overlayscrollbars attribute is removed even if initialization gets canceled', () => {
+    test('already set data-overlayscrollbars-initialize attribute is removed even if initialization gets canceled', () => {
       const target = document.body;
-      target.setAttribute(dataAttributeHost, '');
+      target.setAttribute(dataAttributeInitialize, '');
 
       const { destroy } = createStructureSetupElementsProxy(target, { autoAppend: false });
       destroy();
 
-      expect(document.body.getAttribute(dataAttributeHost)).toBe(null);
+      expect(document.body.getAttribute(dataAttributeInitialize)).toBe(null);
     });
 
-    test('already set data-overlayscrollbars attribute on html element is removed if target is body', () => {
+    test('already set data-overlayscrollbars-initialize attribute on html element is removed if target is body', () => {
-      document.documentElement.setAttribute(dataAttributeHost, '');
+      document.documentElement.setAttribute(dataAttributeInitialize, '');
 
       const { destroy } = createStructureSetupElementsProxy(document.body);
       destroy();
 
-      expect(document.documentElement.getAttribute(dataAttributeHost)).toBe(null);
+      expect(document.documentElement.getAttribute(dataAttributeInitialize)).toBe(null);
     });
   });
 });