fix: disable scroll when inspect on mobile (#112)

zjxxxxxxxxx · Oct 15, 2023 · 4acb46b · 4acb46b
1 parent 3a263cb
commit 4acb46b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/.changeset/pink-monkeys-wink.md b/.changeset/pink-monkeys-wink.md
@@ -0,0 +1,5 @@
+---
+'@open-editor/client': patch
+---
+
+disable scroll when inspect on mobile
diff --git a/packages/client/src/elements/defineInspectElement.ts b/packages/client/src/elements/defineInspectElement.ts
@@ -18,9 +18,9 @@ const CSS = postcss`
   font-family: Menlo, Monaco, 'Courier New', monospace;
   line-height: 1.5;
   font-weight: 400;
-  cursor: default !important;
-  user-select: none !important;
-  -webkit-touch-callout: none !important;
+  cursor: default;
+  user-select: none;
+  touch-callout: none;
 }
 :host {
   all: initial !important;
@@ -31,7 +31,7 @@ const resetCSS = postcss`
 * {
   cursor: default !important;
   user-select: none !important;
-  -webkit-touch-callout: none !important;
+  touch-callout: none !important;
 }
 `;
 

diff --git a/packages/client/src/elements/defineOverlayElement.ts b/packages/client/src/elements/defineOverlayElement.ts
@@ -12,6 +12,7 @@ import {
   off,
 } from '../utils/document';
 import { create_RAF } from '../utils/createRAF';
+import { createStyleInject } from '../utils/createStyleInject';
 import { InternalElements, captureOpts } from '../constants';
 import type { HTMLTooltipElement } from './defineTooltipElement';
 
@@ -46,7 +47,15 @@ const CSS = postcss`
 }
 `;
 
+const touchLockCSS = postcss`
+html {
+  touch-action: none !important;
+}
+`;
+
 export function defineOverlayElement() {
+  const touchLockStyle = createStyleInject(touchLockCSS);
+
   class OverlayElement extends HTMLElement implements HTMLOverlayElement {
     private tooltip: HTMLTooltipElement;
 
@@ -91,6 +100,7 @@ export function defineOverlayElement() {
     }
 
     open = () => {
+      touchLockStyle.insert();
       applyStyle(this.posttion, {
         display: 'block',
       });
@@ -100,6 +110,7 @@ export function defineOverlayElement() {
     };
 
     close = () => {
+      touchLockStyle.remove();
       applyStyle(this.posttion, {
         display: 'none',
       });

diff --git a/packages/client/src/elements/defineTreeElement.ts b/packages/client/src/elements/defineTreeElement.ts
@@ -109,7 +109,7 @@ const CSS = postcss`
 `;
 
 const scrollLockCSS = postcss`
-body {
+html {
   overflow: hidden !important;
 }
 `;

diff --git a/packages/client/src/utils/safeArea.ts b/packages/client/src/utils/safeArea.ts
@@ -1,7 +1,7 @@
 import { createStyleGetter } from './createStyleGetter';
 import { createStyleInject } from './createStyleInject';
 
-const CSS = `
+const CSS = postcss`
 :root {
   --sait: env(safe-area-inset-top);
   --sair: env(safe-area-inset-right);
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,7 +109,7 @@ const CSS = postcss` @@
     `;
     const scrollLockCSS = postcss`
-    body {
+    html {
       overflow: hidden !important;
     }
     `;
@@ Expand Down @@