diff --git a/packages/overlayscrollbars/src/classnames.ts b/packages/overlayscrollbars/src/classnames.ts index 17b8614..49bdb27 100644 --- a/packages/overlayscrollbars/src/classnames.ts +++ b/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 classNamesScrollbarCornerless = `${classNameScrollbar}-cornerless`; -export const classNamesScrollbarTransitionless = `${classNameScrollbar}-transitionless`; -export const classNamesScrollbarInteraction = `${classNameScrollbar}-interaction`; -export const classNamesScrollbarUnusable = `${classNameScrollbar}-unusable`; -export const classNamesScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`; -export const classNamesScrollbarWheel = `${classNameScrollbar}-wheel`; -export const classNamesScrollbarTrackInteractive = `${classNameScrollbarTrack}-interactive`; -export const classNamesScrollbarHandleInteractive = `${classNameScrollbarHandle}-interactive`; +export const classNameScrollbarVisible = `${classNameScrollbar}-visible`; +export const classNameScrollbarCornerless = `${classNameScrollbar}-cornerless`; +export const classNameScrollbarTransitionless = `${classNameScrollbar}-transitionless`; +export const classNameScrollbarInteraction = `${classNameScrollbar}-interaction`; +export const classNameScrollbarUnusable = `${classNameScrollbar}-unusable`; +export const classNameScrollbarAutoHidden = `${classNameScrollbar}-auto-hidden`; +export const classNameScrollbarWheel = `${classNameScrollbar}-wheel`; +export const classNameScrollbarTrackInteractive = `${classNameScrollbarTrack}-interactive`; +export const classNameScrollbarHandleInteractive = `${classNameScrollbarHandle}-interactive`; diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts index 0c34446..ffc04da 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.elements.ts +++ b/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 } = - structureSetupElements; + const { + _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); }; diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts index cbb25b8..6b282f0 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts +++ b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts @@ -15,8 +15,8 @@ import { getPlugins, clickScrollPluginName } from '~/plugins'; import { getEnvironment } from '~/environment'; import { classNameScrollbarHandle, - classNamesScrollbarInteraction, - classNamesScrollbarWheel, + classNameScrollbarInteraction, + 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); diff --git a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts b/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts index f24edd2..6b5bb8d 100644 --- a/packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.ts +++ b/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, - classNamesScrollbarUnusable, - classNamesScrollbarCornerless, - classNamesScrollbarAutoHidden, - classNamesScrollbarHandleInteractive, - classNamesScrollbarTrackInteractive, + classNameScrollbarThemeNone, + classNameScrollbarVisible, + classNameScrollbarUnusable, + classNameScrollbarCornerless, + classNameScrollbarAutoHidden, + 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('showNativeOverlaidScrollbars'); const [theme, themeChanged] = checkOption('scrollbars.theme'); const [visibility, visibilityChanged] = checkOption('scrollbars.visibility'); @@ -174,22 +179,28 @@ export const createScrollbarsSetup = ( const [dragScroll, dragScrollChanged] = checkOption('scrollbars.dragScroll'); const [clickScroll, clickScrollChanged] = checkOption('scrollbars.clickScroll'); - const updateHandle = - _overflowEdgeChanged || _overflowAmountChanged || _directionChanged || force; - const updateVisibility = _overflowStyleChanged || visibilityChanged || force; + const updateHandle = _overflowEdgeChanged || _overflowAmountChanged || _directionChanged; + const updateVisibility = _overflowStyleChanged || visibilityChanged; + 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(theme, true); + _scrollbarsAddRemoveClass(prevTheme); + _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(classNamesScrollbarUnusable, !_overflowAmount.y, false); - scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody); + _scrollbarsAddRemoveClass(classNameScrollbarUnusable, !_overflowAmount.x, true); + _scrollbarsAddRemoveClass(classNameScrollbarUnusable, !_overflowAmount.y, false); + _scrollbarsAddRemoveClass(classNameScrollbarRtl, _directionIsRTL && !_isBody); } }, scrollbarsSetupState, diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts index de27550..7d8f0fa 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts +++ b/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 - ? staticInitializationElement(createNewDiv, defaultHostInitialization, hostInitialization) - : (targetElement as HTMLElement), + _host: hostElement, _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 element if target is body + // always remove dataAttributeHost & dataAttributeInitialize from host and from 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 - ? addClass(parent(targetElement), classNameViewportScrollbarHidden) - : noop; + const removeHtmlClass = + isBody && !viewportIsTarget + ? addClass(parent(targetElement), classNameViewportScrollbarHidden) + : noop; // only insert host for textarea after target if it was generated if (isTextareaHostGenerated) { diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss index 7d70229..d0530db 100644 --- a/packages/overlayscrollbars/src/styles/structure.scss +++ b/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; - height: 0px !important; - visibility: hidden !important; - background: transparent !important; + width: 0 !important; + height: 0 !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, diff --git a/packages/overlayscrollbars/test/jest-jsdom/setups/scrollbarsSetup/scrollbarsSetup.elements.test.ts b/packages/overlayscrollbars/test/jest-jsdom/setups/scrollbarsSetup/scrollbarsSetup.elements.test.ts index 688a435..4d9b94b 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/setups/scrollbarsSetup/scrollbarsSetup.elements.test.ts +++ b/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); diff --git a/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts b/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts index 15789b0..aaaa660 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts +++ b/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', () => { - test('already set data-overlayscrollbars attribute is removed', () => { + describe('data-overlayscrollbars-initialize attribute', () => { + 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', () => { - document.documentElement.setAttribute(dataAttributeHost, ''); + test('already set data-overlayscrollbars-initialize attribute on html element is removed if target is body', () => { + document.documentElement.setAttribute(dataAttributeInitialize, ''); const { destroy } = createStructureSetupElementsProxy(document.body); destroy(); - expect(document.documentElement.getAttribute(dataAttributeHost)).toBe(null); + expect(document.documentElement.getAttribute(dataAttributeInitialize)).toBe(null); }); }); });