From d381820d1678044257fe2cb7b2f178d1f001ed30 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 25 Apr 2021 06:50:16 +0300 Subject: Scrollbar: respect the initial body overflow value (#33706) * add method to handle overflow on body element & tests * replace duplicated code on modal/offcanvas tests --- js/src/util/scrollbar.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'js/src/util') diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js index 31b6143756..352e3e11de 100644 --- a/js/src/util/scrollbar.js +++ b/js/src/util/scrollbar.js @@ -18,11 +18,21 @@ const getWidth = () => { } const hide = (width = getWidth()) => { - document.body.style.overflow = 'hidden' + _disableOverFlow() + // give padding to element to balances the hidden scrollbar width + _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width) // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width) _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width) - _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width) +} + +const _disableOverFlow = () => { + const actualValue = document.body.style.overflow + if (actualValue) { + Manipulator.setDataAttribute(document.body, 'overflow', actualValue) + } + + document.body.style.overflow = 'hidden' } const _setElementAttributes = (selector, styleProp, callback) => { @@ -41,10 +51,10 @@ const _setElementAttributes = (selector, styleProp, callback) => { } const reset = () => { - document.body.style.overflow = 'auto' + _resetElementAttributes('body', 'overflow') + _resetElementAttributes('body', 'paddingRight') _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight') _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight') - _resetElementAttributes('body', 'paddingRight') } const _resetElementAttributes = (selector, styleProp) => { -- cgit v1.2.3