diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0eb898b47..ecb306b1bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
 - Ensure the `PopoverPanel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
+- Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
 
 ## [Unreleased - @headlessui/react]
 
@@ -24,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
 - Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
+- Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
 
 ## [@headlessui/react@1.6.1] - 2022-05-03
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index b30176c22e..1881c12b4c 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -255,10 +255,14 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     let overflow = documentElement.style.overflow
     let paddingRight = documentElement.style.paddingRight
 
-    let scrollbarWidth = ownerWindow.innerWidth - documentElement.clientWidth
-
+    let scrollbarWidthBefore = ownerWindow.innerWidth - documentElement.clientWidth
     documentElement.style.overflow = 'hidden'
-    documentElement.style.paddingRight = `${scrollbarWidth}px`
+
+    if (scrollbarWidthBefore > 0) {
+      let scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth
+      let scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter
+      documentElement.style.paddingRight = `${scrollbarWidth}px`
+    }
 
     return () => {
       documentElement.style.overflow = overflow
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index e191758308..0845d073f8 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -225,10 +225,14 @@ export let Dialog = defineComponent({
       let overflow = documentElement.style.overflow
       let paddingRight = documentElement.style.paddingRight
 
-      let scrollbarWidth = ownerWindow.innerWidth - documentElement.clientWidth
-
+      let scrollbarWidthBefore = ownerWindow.innerWidth - documentElement.clientWidth
       documentElement.style.overflow = 'hidden'
-      documentElement.style.paddingRight = `${scrollbarWidth}px`
+
+      if (scrollbarWidthBefore > 0) {
+        let scrollbarWidthAfter = documentElement.clientWidth - documentElement.offsetWidth
+        let scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter
+        documentElement.style.paddingRight = `${scrollbarWidth}px`
+      }
 
       onInvalidate(() => {
         documentElement.style.overflow = overflow