Decouple Modal's scrollbar functionality (#33245)

1 files changed, 3 insertions, 2 deletions

diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index e63a66bf2..31b614375 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -8,7 +8,7 @@
 import SelectorEngine from '../dom/selector-engine'
 import Manipulator from '../dom/manipulator'
 
-const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed'
+const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
 
 const getWidth = () => {
@@ -19,6 +19,7 @@ const getWidth = () => {
 
 const hide = (width = getWidth()) => {
   document.body.style.overflow = 'hidden'
+  // 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)
@@ -49,7 +50,7 @@ const reset = () => {
 const _resetElementAttributes = (selector, styleProp) => {
   SelectorEngine.find(selector).forEach(element => {
     const value = Manipulator.getDataAttribute(element, styleProp)
-    if (typeof value === 'undefined' && element === document.body) {
+    if (typeof value === 'undefined') {
       element.style.removeProperty(styleProp)
     } else {
       Manipulator.removeDataAttribute(element, styleProp)