From 99af8da6073c852f8c86c622ece12a95bfae58b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Fri, 15 May 2026 11:09:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/directives/custom-animation.js | 17 +++++++++++------ src/directives/index.ts | 4 +++- src/pages/home/components/ProductFeature.vue | 4 +++- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/directives/custom-animation.js b/src/directives/custom-animation.js index e5ddfa3..cfd29d1 100644 --- a/src/directives/custom-animation.js +++ b/src/directives/custom-animation.js @@ -87,7 +87,7 @@ function add(el, root = document) { obj.observer.observe(el) return } - resize.observe(root) + resize.observe(isDocumentRoot(root)) root.addEventListener('scroll', handleScroll) const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -112,7 +112,7 @@ function remove(el, root = document) { } if (obj.els.length === 0) { obj.observer.disconnect() - resize.unobserve(root) + resize.unobserve(isDocumentRoot(root)) root.removeEventListener('scroll', handleScroll) roots.delete(root) } @@ -130,9 +130,10 @@ async function handleScroll({ target: root }) { if (!item.scroll) return const children = el.querySelectorAll(typesStr) if (children.length === 0) return - const elTop_bottom = root.offsetHeight - (el.offsetTop - root.offsetTop - root.scrollTop) - const maxHeight = root.offsetHeight + el.offsetHeight - const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight)) + const rootEl = isDocumentRoot(root) + const elTop_bottom = rootEl.offsetHeight - (el.offsetTop - rootEl.offsetTop - rootEl.scrollTop) + const maxHeight = rootEl.offsetHeight + el.offsetHeight + const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight)) children.forEach((item) => { item.style.transition = 'transform 0.5s ease-out' @@ -165,4 +166,8 @@ function hasAttr(el, attr) { } else { return el.hasAttribute(attr) } -} \ No newline at end of file +} +// 检查document是否为根元素 +function isDocumentRoot(root) { + return root === document ? document.documentElement : root +} diff --git a/src/directives/index.ts b/src/directives/index.ts index bce0185..fb4c1ff 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -2,7 +2,9 @@ import type { App } from 'vue' export default { install(app: App) { - const directivesList = import.meta.glob('./*.ts', { eager: true }) as any; + const directivesList1 = import.meta.glob('./*.ts', { eager: true }) as any; + const directivesList2 = import.meta.glob('./*.js', { eager: true }) as any; + const directivesList = { ...directivesList1, ...directivesList2 }; Object.keys(directivesList).forEach(key => { app.directive(directivesList[key].default.name, directivesList[key].default); }); diff --git a/src/pages/home/components/ProductFeature.vue b/src/pages/home/components/ProductFeature.vue index 7b24527..b650459 100644 --- a/src/pages/home/components/ProductFeature.vue +++ b/src/pages/home/components/ProductFeature.vue @@ -18,13 +18,15 @@