diff --git a/cypress/e2e/scrollbar.cy.js b/cypress/e2e/scrollbar.cy.js index b81f982da..9841282e8 100644 --- a/cypress/e2e/scrollbar.cy.js +++ b/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('
lorem ipsum
') + 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('
lorem ipsum
') diff --git a/src/utils/scrollbarFix.js b/src/utils/scrollbarFix.js index 459732452..7b06ce9c2 100644 --- a/src/utils/scrollbarFix.js +++ b/src/utils/scrollbarFix.js @@ -7,6 +7,11 @@ 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 @@ -14,7 +19,7 @@ export const fixScrollbar = () => { // 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` } }