与div相关的带有scrollmagic的pin元素答案

【问题标题】：pin element with scrollmagic related to div与div相关的带有scrollmagic的pin元素
【发布时间】：2018-09-09 18:36:11
【问题描述】：

我用 ScrollMagic 创建了一个简单的动画：一个轮子在水平滚动页面时旋转。问题是，当滚动窗口页面时，动画看起来很流畅，而当只滚动放置元素的 div 时，动画非常“混蛋”。我想隐藏窗口滚动，只留下 div 滚动，保持动画平滑。有谁知道为什么以及如何解决这个问题？谢谢！

html代码：

HTML

<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>

CSS

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;
}

JAVASCRIPT

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);

【问题讨论】：

标签： scrollmagic

【解决方案1】：

解决了！有必要告诉 ScrollMagic 动画是指哪个容器。就我而言，我只是添加：

container: '.scrollcontainer'

到控制器对象

【讨论】：