AOS动画在页面滚动时为什么不触发？

Dev · 景景提问于 2026-02-23 17:56:21 阅读 31

交互

我用AOS库给页面加了淡入动画，但滚动到元素位置时完全没反应，控制台也没报错。初始化代码是这么写的：

AOS.init({
  duration: 1000,
  once: true
});

HTML里也加了data-aos=”fade-up”，本地开发环境没问题，部署到线上就不行了，是不是和懒加载或者动态内容有关？

AOS动画 JS动画用户体验

我来解答赞 7 收藏

反馈

1 条解答

玉淇 Lv1

我之前这样搞的，AOS默认是监听scroll事件的，但如果你页面用了懒加载或者动态插入内容，得手动触发AOS.refresh()，比如在动态内容加载完后加一行：

AOS.init({

  duration: 1000,

  once: true

});



// 动态内容插入后，比如fetch完数据渲染完DOM

AOS.refresh();

另外检查下是不是滚动容器不是window，如果是自定义滚动容器，得配置anchorPlacement和startEvent，不过90%的情况就是没调refresh()。

2026-02-23 17:57