fix(滚动): 为多个组件添加overscroll-contain并处理滚轮事件

为多个模态框和列表组件添加overscroll-contain类以防止滚动链
添加处理函数阻止模态框背景的滚轮事件传播到内容区域
This commit is contained in:
2026-04-12 21:30:33 +08:00
parent a280d44481
commit ba10f90dde
5 changed files with 19 additions and 5 deletions
+3 -3
View File
@@ -14,7 +14,7 @@
@click.self="closeModal"
>
<div
class="modal-panel relative w-full max-w-5xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 px-6 pb-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
class="modal-panel relative w-full max-w-5xl max-h-[85vh] overflow-y-auto overscroll-contain scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 px-6 pb-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
>
<!-- 返回按钮 - sticky定位在模态框内部左上角滚动时始终可见 -->
<button
@@ -276,7 +276,7 @@
应用详情
</h3>
<div
class="max-h-48 overflow-y-auto text-sm leading-relaxed text-slate-600 dark:text-slate-300 space-y-2"
class="max-h-48 overflow-y-auto overscroll-contain text-sm leading-relaxed text-slate-600 dark:text-slate-300 space-y-2"
v-html="displayApp.more.replace(/\n/g, '<br>')"
></div>
</div>
@@ -351,7 +351,7 @@
应用信息
</h3>
<div
class="max-h-80 overflow-y-auto rounded-xl bg-slate-50 p-4 dark:bg-slate-900/50 space-y-3"
class="max-h-80 overflow-y-auto overscroll-contain rounded-xl bg-slate-50 p-4 dark:bg-slate-900/50 space-y-3"
>
<div v-if="displayApp?.name" class="flex justify-between">
<span class="text-sm text-slate-500">应用名称</span>