ScrollMagic问题：如何为元素永久添加类，回滚时不移除

这个问题其实很好解决——核心就是要让你的ScrollMagic场景只执行一次添加类的操作，之后彻底停止监听滚动事件，避免后续滚动触发任何变更。

问题分析 #

你当前的代码虽然判断了scrollDirection === "FORWARD"，但ScrollMagic的start事件会在元素进入和离开视口时都触发（哪怕设置了offset），如果动画逻辑依赖场景状态做了移除类的操作，回滚时就会出现类被移除的情况。我们需要的是一次性触发，永久生效。

最优解决方案 #

直接在触发添加类的动作后，销毁这个ScrollMagic场景，这样它就不会再响应任何滚动事件了。推荐使用enter事件（比start更精准，仅在元素进入视口时触发）：

var controller = new ScrollMagic.Controller(); 
var scene = new ScrollMagic.Scene({ 
  triggerElement: '#intro', 
  offset: 50,
  triggerHook: 'onEnter' // 明确设置触发时机为元素进入视口
}) 
.on("enter", function() { 
  // 为目标元素添加动画类
  $('#welcome').addClass('animated');
  // 关键：销毁场景，彻底停止监听滚动
  scene.destroy();
}) 
.addTo(controller);

补充说明 #

• 使用enter事件替代start：enter事件仅在元素进入视口范围内时触发，不需要额外判断滚动方向，逻辑更清晰；
• 销毁场景：scene.destroy()会将该场景从ScrollMagic控制器中移除，释放监听资源，确保后续滚动不会再触发任何相关操作；
• 替代方案（如果需要保留场景）：如果你不想彻底销毁场景，也可以用scene.enabled(false)禁用它，只是后续还能重新启用，但对于你的需求来说，销毁更高效。

另一种标记式方案（不推荐） #

如果出于某些原因不想销毁场景，也可以用一个状态变量来标记是否已经执行过动画：

var hasTriggeredAnimation = false;
var controller = new ScrollMagic.Controller(); 
var scene = new ScrollMagic.Scene({ 
  triggerElement: '#intro', 
  offset: 50
}) 
.on("start", function(e) { 
  // 仅在向前滚动且未触发过动画时执行
  if (e.scrollDirection === "FORWARD" && !hasTriggeredAnimation) { 
    $('#welcome').addClass('animated');
    hasTriggeredAnimation = true;
  }
}) 
.addTo(controller);

不过这种方案场景仍在监听滚动事件，只是通过标记跳过逻辑，性能上不如销毁场景的方案。

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