mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-04-30 03:10:16 +08:00
fix(滚动): 为多个组件添加overscroll-contain并处理滚轮事件
为多个模态框和列表组件添加overscroll-contain类以防止滚动链 添加处理函数阻止模态框背景的滚轮事件传播到内容区域
This commit is contained in:
@@ -14,7 +14,7 @@
|
|||||||
@click.self="closeModal"
|
@click.self="closeModal"
|
||||||
>
|
>
|
||||||
<div
|
<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定位在模态框内部左上角,滚动时始终可见 -->
|
<!-- 返回按钮 - sticky定位在模态框内部左上角,滚动时始终可见 -->
|
||||||
<button
|
<button
|
||||||
@@ -276,7 +276,7 @@
|
|||||||
应用详情
|
应用详情
|
||||||
</h3>
|
</h3>
|
||||||
<div
|
<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>')"
|
v-html="displayApp.more.replace(/\n/g, '<br>')"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -351,7 +351,7 @@
|
|||||||
应用信息
|
应用信息
|
||||||
</h3>
|
</h3>
|
||||||
<div
|
<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">
|
<div v-if="displayApp?.name" class="flex justify-between">
|
||||||
<span class="text-sm text-slate-500">应用名称</span>
|
<span class="text-sm text-slate-500">应用名称</span>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
v-if="show"
|
v-if="show"
|
||||||
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
|
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
|
||||||
@click="handleOverlayClick"
|
@click="handleOverlayClick"
|
||||||
|
@wheel="onOverlayWheel"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent w-full max-w-2xl max-h-[85vh] overflow-y-auto overscroll-contain rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
class="scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent w-full max-w-2xl max-h-[85vh] overflow-y-auto overscroll-contain rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
||||||
@@ -310,4 +311,10 @@ const copyLogs = () => {
|
|||||||
const downloadProgress = computed(() => {
|
const downloadProgress = computed(() => {
|
||||||
return props.download ? Math.floor(props.download.progress * 100) : 0;
|
return props.download ? Math.floor(props.download.progress * 100) : 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const onOverlayWheel = (e: WheelEvent) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -10,6 +10,7 @@
|
|||||||
<div
|
<div
|
||||||
v-if="show"
|
v-if="show"
|
||||||
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-6 lg:py-10"
|
class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-6 lg:py-10"
|
||||||
|
@wheel="onOverlayWheel"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
class="flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
|
||||||
@@ -78,4 +79,10 @@ const props = defineProps<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const selectedCount = computed(() => props.store.getSelectedItems().length);
|
const selectedCount = computed(() => props.store.getSelectedItems().length);
|
||||||
|
|
||||||
|
const onOverlayWheel = (e: WheelEvent) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (target.closest(".overflow-y-auto, .overflow-auto")) return;
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="min-h-0 overflow-y-auto border-r border-slate-200/70 p-6 dark:border-slate-800/70"
|
class="min-h-0 overflow-y-auto overscroll-contain border-r border-slate-200/70 p-6 dark:border-slate-800/70"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="items.length === 0"
|
v-if="items.length === 0"
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
>{{ tasks.length }} 项</span
|
>{{ tasks.length }} 项</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 min-h-0 flex-1 space-y-4 overflow-y-auto">
|
<div class="mt-4 min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain">
|
||||||
<div
|
<div
|
||||||
v-if="tasks.length === 0"
|
v-if="tasks.length === 0"
|
||||||
class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
|
class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
|
||||||
|
|||||||
Reference in New Issue
Block a user