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

This commit is contained in:
yuantao
2025-11-03 15:56:28 +08:00
parent 7088747dee
commit cb9488ec05
8 changed files with 1293 additions and 1263 deletions

View File

@@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <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-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 透明 --> <!-- 透明 -->
@@ -93,12 +93,13 @@
--confirmBg: rgba(0, 0, 0, 0.15); --confirmBg: rgba(0, 0, 0, 0.15);
--confirmBtnColor: #000000cc; --confirmBtnColor: #000000cc;
} }
html {
background-color: var(--note-title);
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 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'); background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
color: var(--text-primary); color: var(--text-primary);
/* 适配iPhone X及更新机型的刘海屏 */ /* 适配iPhone X及更新机型的刘海屏 */

View File

@@ -114,6 +114,12 @@ onUnmounted(() => {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: #f5f5f5; // 设置默认背景色,防止闪烁 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;
} }
// 网络状态指示器 // 网络状态指示器

View File

@@ -8,7 +8,19 @@ html {
user-select: none; user-select: none;
-webkit-user-drag: none; -webkit-user-drag: none;
-webkit-tap-highlight-color: transparent; -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 { body {

View File

@@ -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-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-repeat: repeat-y;
background-position: 0 calc((var(--editor-font-size, 1rem) * var(--editor-line-height, 1.6) - var(--editor-font-size, 1rem)) / 2); 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 { .editor-content::before {

View File

@@ -116,6 +116,7 @@ const setSearchQuery = value => {
.folder-page-container { .folder-page-container {
padding: 0.625rem; padding: 0.625rem;
background-color: var(--background); background-color: var(--background);
touch-action: pan-y;
} }
.search-container { .search-container {

View File

@@ -438,9 +438,12 @@ onBeforeUnmount(async () => {
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background-color: var(--background); background-color: var(--background);
overflow: hidden;
section { section {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
} }
.offline-banner { .offline-banner {
@@ -467,8 +470,15 @@ onBeforeUnmount(async () => {
} }
.note-container { .note-container {
flex: 1; flex: 1;
overflow-y: scroll; overflow-y: auto;
background-color: var(--background); 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 { .rich-text-editor {
min-height: 100%; min-height: 100%;

View File

@@ -447,6 +447,8 @@ const notes = computed(() => store.notes)
.notes-container { .notes-container {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden;
touch-action: pan-y;
} }
.notes-list { .notes-list {

View File

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