s.esmaeili/hedena_gold
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep search scroll position when opening the product image preview

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
s.esmaeili
2026-10-11 19:14:14 +03:30
co-authored by Cursor
parent c04505fbd8
commit 759625d2a1
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user-app-v2/src/components/product/SingleProduct.vue
+12 -5
View File
@@ -426,18 +426,25 @@ watch(slides, (list) => {
// for the former, so opening the preview needs no drag-jitter bookkeeping here
// the way the old inline handlers did.
const previewOpen = ref(false)
let lockedBody = false
function openPreview() {
if (!hasImages.value) return
previewOpen.value = true
// The preview is teleported to <body> and would otherwise let the page (or
// the Drawer) scroll behind it.
document.body.style.overflow = 'hidden'
// The preview is teleported to <body> and would otherwise let the page
// scroll behind it. Skipped when ProductMorph already holds <html>: with
// both locked, <body> becomes its own viewport-tall scroller and the page
// underneath loses its scroll position.
if (document.documentElement.style.overflow !== 'hidden') {
document.body.style.overflow = 'hidden'
lockedBody = true
}
}
function closePreview() {
previewOpen.value = false
document.body.style.overflow = ''
if (lockedBody) document.body.style.overflow = ''
lockedBody = false
}
const wageLabel = computed(() => {
@@ -517,7 +524,7 @@ onBeforeMount(async () => {
// closed, or the routed page is navigated away from — the body scroll lock it
// set would otherwise outlive it and leave the rest of the app unscrollable.
onBeforeUnmount(() => {
if (previewOpen.value) document.body.style.overflow = ''
if (lockedBody) document.body.style.overflow = ''
})
</script>
apps/user-app/src/components/product/SingleProduct.vue
+12 -5
View File
@@ -416,18 +416,25 @@ watch(selectedVariant, (v) => {
// full-screen viewer teleported to <body>, with its own GallerySlider kept in
// lockstep via the shared `imageIndex` v-model.
const previewOpen = ref(false)
let lockedBody = false
function openPreview() {
if (!hasImages.value) return
previewOpen.value = true
// Teleported to <body>, so without this the page (or the Drawer) would
// still scroll behind the preview.
document.body.style.overflow = 'hidden'
// Teleported to <body>, so without this the page would still scroll behind
// the preview. Skipped when ProductMorph already holds <html>: with both
// locked, <body> becomes its own viewport-tall scroller and the page
// underneath loses its scroll position.
if (document.documentElement.style.overflow !== 'hidden') {
document.body.style.overflow = 'hidden'
lockedBody = true
}
}
function closePreview() {
previewOpen.value = false
document.body.style.overflow = ''
if (lockedBody) document.body.style.overflow = ''
lockedBody = false
}
const wageLabel = computed(() => {
@@ -496,7 +503,7 @@ onBeforeMount(async () => {
// closed, or the routed page is navigated away from — the body scroll lock it
// set would otherwise outlive it and leave the rest of the app unscrollable.
onBeforeUnmount(() => {
if (previewOpen.value) document.body.style.overflow = ''
if (lockedBody) document.body.style.overflow = ''
})
</script>