Intersection Observer页面加载与路由返回时未触发问题求助

使用VueUse的useIntersectionObserver实现元素进入视口时的淡入动画，遇到以下问题：

• 导航至其他页面后返回原路由（保留滚动位置），或滚动至轮播区域后导航再返回，Intersection Observer无法自动触发，元素始终处于隐藏状态
• 仅在手动滚动页面或刷新后，元素才会正常显示

问题根源：初始隐藏元素使用的visibility: hidden会让元素脱离Intersection Observer的检测范围，返回页面后无法触发相交判断；同时原逻辑中触发一次相交后就停止了Observer，路由返回后不会重新检测元素状态。

解决方案 #

1. 替换visibility: hidden，确保元素可被Observer检测 #

将visibility: hidden替换为opacity: 0 + pointer-events: none，这样元素仍保留在文档流中，Intersection Observer可以正常检测其相交状态，同时视觉上不可见且不响应交互。

修改后的CSS：

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    pointer-events: auto; /* 动画完成后恢复交互能力 */
}

.invisible {
    opacity: 0;
    pointer-events: none; /* 隐藏时禁用交互 */
}

2. 调整Observer逻辑，支持路由返回时重新检测 #

在组件挂载或路由激活时，手动检查元素是否已在视口内；同时修改Observer逻辑，避免过早停止监听（或在组件激活时重新启动Observer）。

修改后的Observer.vue：

<template>
    <div ref="observerRef">
        <slot :isVisible="isVisible" />
    </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core';
import { onMounted, ref, onActivated } from 'vue';

const props = defineProps({
    rootMargin: {
        type: String,
        default: '0px',
    },
});

const observerRef = ref(null);
const isVisible = ref(false);
let stopObserver = null;

// 初始化Observer
const initObserver = () => {
    if (stopObserver) stopObserver();
    const { stop } = useIntersectionObserver(
        observerRef,
        ([{ isIntersecting }]) => {
            if (isIntersecting) {
                isVisible.value = true;
                stopObserver(); // 触发后停止监听，避免重复触发
            }
        },
        {
            rootMargin: props.rootMargin,
        }
    );
    stopObserver = stop;
};

// 手动检查元素是否在视口内
const checkVisibility = () => {
    if (!observerRef.value) return;
    const rect = observerRef.value.getBoundingClientRect();
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
    
    if (isInViewport) {
        isVisible.value = true;
        if (stopObserver) stopObserver();
    }
};

onMounted(() => {
    initObserver();
    // 挂载时立即检查一次，处理路由返回时元素已在视口的情况
    checkVisibility();
});

// 如果使用Nuxt的keep-alive缓存组件，用onActivated确保每次激活都重新检测
onActivated(() => {
    isVisible.value = false;
    initObserver();
    checkVisibility();
});
</script>

3. 组件使用逻辑优化 #

不需要修改原组件调用代码，但如果是使用keep-alive缓存的组件，要确保isVisible状态在组件激活时能正确重置，配合上述onActivated钩子即可。

内容的提问来源于stack exchange，提问作者Michael