ScrollReveal动画异常：窗口尺寸变化时.reveal-7元素消失求助

核心问题分析 #

1. 参数类型错误：你设置的reset: 'true'是字符串值，而ScrollReveal的reset参数要求布尔值true/false，虽然字符串'true'会被视为真值，但可能导致内部逻辑出现异常判断。
2. 底部元素的触发阈值问题：.reveal-7是页面最后一个元素，当窗口高度缩小时，它极易触发reset的反向动画（reset会在元素离开视口时执行反向隐藏）。默认的viewFactor（元素可见比例阈值为0.2）在小窗口下，元素仅需少量离开视口就会触发反向逻辑。
3. 窗口 resize 未重新计算位置：ScrollReveal不会自动监听窗口大小变化并重新计算元素位置，旧的视口位置数据会导致resize后元素状态误判。

具体修复方案 #

1. 修正参数类型并优化配置

替换原JS代码为以下内容，重点修复reset参数类型，并给底部的.reveal-7单独配置：

document.addEventListener("DOMContentLoaded", function () {
  initScrollReveal();
  // 监听窗口resize，重新初始化ScrollReveal
  window.addEventListener('resize', function() {
    sr.destroy();
    initScrollReveal();
  });
});

function initScrollReveal() {
  window.sr = ScrollReveal({reset: true}); // 改为布尔值true
  sr.reveal('.reveal-1', {duration: 600});
  sr.reveal('.reveal-2', {duration: 1200});
  sr.reveal('.reveal-3', {duration: 1800});
  sr.reveal('.reveal-4', {duration: 2400});
  sr.reveal('.reveal-5', {duration: 3000});
  sr.reveal('.reveal-6', {duration: 3600});
  // 给最后一个元素单独配置，降低触发阈值并关闭reset
  sr.reveal('.reveal-7', {
    duration: 4200,
    viewFactor: 0.1, // 降低可见比例触发条件
    reset: false // 底部元素关闭reset，避免resize时误触发反向动画
  });
}

2. 调整页面布局避免元素紧贴底部

给外层wrapper添加底部内边距，确保最后一个元素在窗口缩小时不会轻易被挤出视口：

.wrapper {
  padding-bottom: 60px; /* 按需调整数值 */
}

3. 保留初始CSS的注意点

你的初始CSS设置visibility: hidden是正确的，ScrollReveal会在元素进入视口时自动切换为visible，无需修改。

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