Improve iOS scroll locking (#1830)

* use a simpler `position: fixed` approach to prevent scroll locking

This isn't super ideal, but just preventing the default behavior on the
entire document while `touchmove`-ing isn't ideal either because then
you can't scroll inside the dialog or on the backdrop if your dialog
panel is larger than the viewport.

Again, this is not 100% correct, but it is better because you will be
able to scroll the dialog, and not the body.

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830))
 
 ## [1.7.0] - 2022-09-06
 

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -119,16 +119,10 @@ function useScrollLock(ownerDocument: Document | null, enabled: boolean) {
     }
 
     if (isIOS()) {
-      d.addEventListener(
-        ownerDocument,
-        'touchmove',
-        (e) => {
-          e.preventDefault()
-        },
-        { passive: false }
-      )
-
       let scrollPosition = window.pageYOffset
+      style(documentElement, 'position', 'fixed')
+      style(documentElement, 'marginTop', `-${scrollPosition}px`)
+      style(documentElement, 'width', `100%`)
       d.add(() => window.scrollTo(0, scrollPosition))
     }
 

packages/@headlessui-vue/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830))
 
 ## [1.7.0] - 2022-09-06
 

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -249,16 +249,10 @@ export let Dialog = defineComponent({
       }
 
       if (isIOS()) {
-        d.addEventListener(
-          owner,
-          'touchmove',
-          (e) => {
-            e.preventDefault()
-          },
-          { passive: false }
-        )
-
         let scrollPosition = window.pageYOffset
+        style(documentElement, 'position', 'fixed')
+        style(documentElement, 'marginTop', `-${scrollPosition}px`)
+        style(documentElement, 'width', `100%`)
         d.add(() => window.scrollTo(0, scrollPosition))
       }