From 28a5a72ed56df3cc5efb1d5164376c9c9541e4f0 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 9 Dec 2021 15:49:28 +0200 Subject: [PATCH] Scrollbar - remove margin/padding properties properly (#35388) Co-authored-by: XhmikosR --- js/src/util/scrollbar.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js index 187a6694dc..b81d4b2372 100644 --- a/js/src/util/scrollbar.js +++ b/js/src/util/scrollbar.js @@ -15,8 +15,8 @@ import { isElement } from './index' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' -const PROPERTY_PADDING = 'paddingRight' -const PROPERTY_MARGIN = 'marginRight' +const PROPERTY_PADDING = 'padding-right' +const PROPERTY_MARGIN = 'margin-right' /** * Class definition @@ -69,15 +69,15 @@ class ScrollBarHelper { } this._saveInitialAttribute(element, styleProp) - const calculatedValue = window.getComputedStyle(element)[styleProp] - element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px` + const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProp) + element.style.setProperty(styleProp, `${callback(Number.parseFloat(calculatedValue))}px`) } this._applyManipulationCallback(selector, manipulationCallBack) } _saveInitialAttribute(element, styleProp) { - const actualValue = element.style[styleProp] + const actualValue = element.style.getPropertyValue(styleProp) if (actualValue) { Manipulator.setDataAttribute(element, styleProp, actualValue) } @@ -86,13 +86,14 @@ class ScrollBarHelper { _resetElementAttributes(selector, styleProp) { const manipulationCallBack = element => { const value = Manipulator.getDataAttribute(element, styleProp) - if (typeof value === 'undefined') { + // We only want to remove the property if the value is `null`; the value can also be zero + if (value === null) { element.style.removeProperty(styleProp) return } Manipulator.removeDataAttribute(element, styleProp) - element.style[styleProp] = value + element.style.setProperty(styleProp, value) } this._applyManipulationCallback(selector, manipulationCallBack)