Question

我用ScrollMgic创建了一个简单的动画：水平滚动页面时旋转的钢we。问题在于，滚动窗口页面时，动画看起来很平滑，而仅滚动放置元素所在的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);

Answer 1

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

container: '.scrollcontainer'

到控制器对象

与div相关的scrollmagic的pin元素

1 个答案: