修复修复移动端滚动问题，调整触摸行为以允许垂直滚动

2025-11-03 15:56:28 +08:00
parent 7088747dee
commit cb9488ec05
8 changed files with 1293 additions and 1263 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <!-- 透明 -->
@@ -93,12 +93,13 @@
        --confirmBg: rgba(0, 0, 0, 0.15);
        --confirmBtnColor: #000000cc;
      }
-
+      html {
+        background-color: var(--note-title);
+      }
      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        background-color: white;
        background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
        color: var(--text-primary);
        /* 适配iPhone X及更新机型的刘海屏 */
--- a/src/App.vue
+++ b/src/App.vue
@@ -114,6 +114,12 @@ onUnmounted(() => {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5; // 设置默认背景色，防止闪烁
+  touch-action: pan-y;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -ms-touch-action: none;
+  -ms-user-select: none;
+  user-select: none;
 }

 // 网络状态指示器
--- a/src/common/base.css
+++ b/src/common/base.css
@@ -8,7 +8,19 @@ html {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
-  touch-action: none;
+  touch-action: pan-y;
+  overflow: hidden;
+}
+
+/* 禁止页面整体滚动 */
+body {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  touch-action: pan-y;
 }

 body {
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -1999,6 +1999,12 @@ defineExpose({
  background-size: 100% calc(var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6)); /* var(--editor-font-size) * var(--editor-line-height) */
  background-repeat: repeat-y;
  background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2);
+  touch-action: pan-y;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-overflow-scrolling: touch;
 }

 .editor-content::before {
--- a/src/pages/FolderPage.vue
+++ b/src/pages/FolderPage.vue
@@ -116,6 +116,7 @@ const setSearchQuery = value => {
 .folder-page-container {
  padding: 0.625rem;
  background-color: var(--background);
+  touch-action: pan-y;
 }

 .search-container {
--- a/src/pages/NoteEditorPage.vue
+++ b/src/pages/NoteEditorPage.vue
@@ -438,9 +438,12 @@ onBeforeUnmount(async () => {
  flex-direction: column;
  height: 100vh;
  background-color: var(--background);
+  overflow: hidden;
  section {
    width: 100%;
    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
  }
 }
 .offline-banner {
@@ -467,8 +470,15 @@ onBeforeUnmount(async () => {
 }
 .note-container {
  flex: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
  background-color: var(--background);
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.rich-text-editor {
+  min-height: 100%;
+  touch-action: pan-y;
 }
 .rich-text-editor {
  min-height: 100%;
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -447,6 +447,8 @@ const notes = computed(() => store.notes)
 .notes-container {
  flex: 1;
  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
 }

 .notes-list {
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -115,16 +115,8 @@ const settings = computed(() => store.settings)
  background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
  width: 100%;
  height: 100vh;
-  overflow-y: scroll;
-
-  .item-text-primary {
-    font-size: 1rem;
-    color: #8e8e8e;
-  }
-
-  .item-text-tertiary {
-    font-size: 0.9375rem;
-    color: #b4b4b4;
-  }
+  overflow-y: auto;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
 }
 </style>