Next.js中wow.js仅首次编译生效，刷新后滚动无动画问题求助

问题重现 #

在Next.js项目中使用wow.js实现滚动元素动画时，仅编译后首次滚动生效，Chrome刷新页面后滚动到元素无动画，Firefox正常。已尝试直接引入wow.js、改用CDN、react-waypoint均无效。

解决方案 #

方案1：调整wow.js初始化时机与状态重置

核心是避开Next.js的hydration阶段，确保在客户端完全渲染后初始化，并手动触发一次状态同步适配Chrome的滚动位置保留机制：

import { useEffect, useState } from 'react';
// 确保已安装animate.css：npm install animate.css
import 'animate.css';

export default function YourComponent() {
  const [isClientReady, setIsClientReady] = useState(false);

  // 标记客户端hydration完成
  useEffect(() => {
    setIsClientReady(true);
  }, []);

  useEffect(() => {
    if (!isClientReady) return;

    // 仅在客户端引入wow.js
    const { WOW } = require('wowjs');
    const wowInstance = new WOW({
      live: false, // 无需动态添加元素时关闭live模式，优化性能
      offset: 20, // 元素进入视口20px时触发动画
      mobile: true,
      animateClass: 'animate__animated', // 适配新版animate.css的前缀
    });

    wowInstance.init();
    // Chrome刷新后保留滚动位置，手动触发一次检测
    setTimeout(() => {
      wowInstance.sync();
    }, 100);

    // 组件卸载时清理实例
    return () => {
      wowInstance.destroy();
    };
  }, [isClientReady]);

  return (
    <>
      <div
        className='hover-up-5 flex w-1/2 lg:w-auto py-4 wow animate__fadeInUp'
        data-wow-delay=".8s"
      >
        {/* 你的SVG内容 */}
      </div>
    </>
  );
}

关键调整说明

1. hydration时机处理：用isClientReady状态确保在Next.js客户端渲染完成后再初始化wow.js，避免服务端渲染导致的DOM状态不一致。
2. Chrome滚动位置适配：调用wowInstance.sync()手动触发动画检测，解决Chrome刷新后保留滚动位置导致wow.js漏检的问题。
3. 类名适配：如果使用新版animate.css（带animate__前缀），需同步修改wow的animateClass配置和元素类名；旧版animate.css则改为animateClass: 'animated'，元素类名用wow fadeInUp。

方案2：强制重置页面滚动位置（可选）

如果方案1仍无效，可在页面加载时强制滚动到顶部，确保wow.js从头开始检测元素：

useEffect(() => {
  if (typeof window !== 'undefined') {
    window.scrollTo(0, 0);
  }
}, []);

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