Fix body padding (#475)

* Fix body padding

* Fix race condition with browser disposing context

* Revert "Fix race condition with browser disposing context"

This reverts commit 584cc6a.

---------

Co-authored-by: Chris Sainty <[email protected]>

src/Blazored.Modal/BlazoredModal.razor.js

@@ -1,7 +1,31 @@
-export function setBodyStyle() {
+const el = document.body;
+const originalProps = {overflow: el.style.overflow, paddingRight: el.style.paddingRight};
+const getScrollBarWidth = () => {
+    let el = document.createElement("div");
+    el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
+    document.body.appendChild(el);
+    let width = el.offsetWidth - el.clientWidth;
+    el.remove();
+    return width;
+}
+const isScrollbarPresent = () => {
+    const beforeScrollbarHidden = document.body.clientWidth;
+    const overflowState = document.body?.style.overflow;
     document.body.style.overflow = 'hidden';
+    const afterScrollbarHidden = document.body.clientWidth;
+    document.body.style.overflow = overflowState;
+    return beforeScrollbarHidden !== afterScrollbarHidden;
+};
+
+export function setBodyStyle() {
+    if (isScrollbarPresent()) {
+        el.style.paddingRight = `${getScrollBarWidth()}px`;
+    }
+
+    el.style.overflow = 'hidden';
 }
 
 export function removeBodyStyle() {
-    document.body.style.overflow = 'auto';
+    el.style.overflow = originalProps.overflow || 'auto';
+    el.style.paddingRight = originalProps.paddingRight;
 }