带有与 div 相关的滚动魔术的 PIN 元素

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'

到控制器对象