fix: do not adjust padding right when body has overflow-y: scroll (#2664

)

cypress/e2e/scrollbar.cy.js

@@ -64,6 +64,24 @@ describe('Vertical scrollbar', () => {
     Swal.close()
   })
 
+  it('should not adjust body padding if overflow-y: scroll is set on body', () => {
+    const talltDiv = document.createElement('div')
+    talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')
+    document.body.appendChild(talltDiv)
+    document.body.style.overflowY = 'scroll'
+    document.body.style.paddingRight = '30px'
+
+    SwalWithoutAnimation.fire({
+      title: 'no padding right adjustment when overflow-y: scroll is set on body',
+      didClose: () => {
+        document.body.removeChild(talltDiv)
+      },
+    })
+
+    const bodyStyles = window.getComputedStyle(document.body)
+    expect(bodyStyles.paddingRight).to.equal('30px')
+  })
+
   it('should be restored before a toast is fired after a modal', (done) => {
     const talltDiv = document.createElement('div')
     talltDiv.innerHTML = Array(100).join('<div>lorem ipsum</div>')

src/utils/scrollbarFix.js

@@ -7,14 +7,19 @@ import { measureScrollbar } from './dom/measureScrollbar.js'
 let previousBodyPadding = null
 
 export const fixScrollbar = () => {
+  const bodyStyles = window.getComputedStyle(document.body)
+  // https://github.com/sweetalert2/sweetalert2/issues/2663
+  if (bodyStyles.overflowY === 'scroll') {
+    return
+  }
   // for queues, do not do this more than once
   if (previousBodyPadding !== null) {
     return
   }
   // if the body has overflow
   if (document.body.scrollHeight > window.innerHeight) {
     // add padding so the content doesn't shift after removal of scrollbar
-    previousBodyPadding = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'))
+    previousBodyPadding = parseInt(bodyStyles.getPropertyValue('padding-right'))
     document.body.style.paddingRight = `${previousBodyPadding + measureScrollbar()}px`
   }
 }