javascript - 使用与 div 相关的 scrollmagic 固定元素

Question

我用 ScrollMagic 创建了一个简单的动画:一个轮子在水平滚动页面时旋转。问题在于，当滚动窗口页面时，动画看起来很流畅，而当仅滚动放置元素的 div 时，动画非常“困惑”。

我想隐藏窗口滚动，只留下 div 滚动，保持动画流畅。

有谁知道为什么以及如何解决这个问题？

var controller = new ScrollMagic.Controller({
  vertical: false
});

var tween = TweenMax.to("#weel", 1, {
  rotation: 1080,
  ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 5000
  })
  .setTween(tween)
  .setPin("#weel", {
    pushFollowers: false
  })
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

body {}

.weel img {
  width: 100px;
}

#scrolldiv {
  height: 500px;
  width: 5000px;
  background: url(bgterritorio.jpg);
  position: relative;
}

.scrollcontainer {
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;
}

<div class="scrollcontainer">
  <div id="scrolldiv" class="scrolldiv">
    <div class="weel">
      <img id="weel" src="weel.png" alt="">
    </div>
  </div>
  <div id="trigger">
  </div>
</div>

Answer 1

解决了!有必要告诉 ScrollMagic 动画引用了哪个容器。就我而言，我只是添加:

container: '.scrollcontainer'

到 Controller 对象