1

我正在使用 ScrollMagic 在本教程之后进行视差部分滚动。我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。

main.css

.parallaxParent {
    height: 100vh;
    overflow: hidden;
}
.parallaxParent > * {
    height: 200%;
    position: relative;
    top: -100%;
}

索引.html

<head>
    ...
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <div id="parallax1" class="parallaxParent picture-frame">
    <div style="background-image: url(../images/website/some-image.jpg); background-repeat:no-repeat; background-size:100% 100%;"></div>
    </div>

    <div class="small-text-frame text-align-center">
        blah blah blah        
    </div>

    <!-- Include ScrollMagic and GSAP plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
    <script src="js/scroll_magic.js"></script>

</body>

scroll_magic.js

// init controller
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
                .setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax2"})
                .setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#parallax3"})
                .setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);

这一切都遵循他们的教程，效果很好。显然我做错了什么，但我不知道是什么。该问题在 Chrome 和 Firefox 中都存在。

感谢您的任何建议！

编辑

有人向我指出，控制台中有一些我没有注意到的错误日志记录。页面加载时产生的所有错误本质上都是调试错误，我可以接受。但是，当我尝试用鼠标滚轮滚动页面时，突然间，这个错误开始产生数百次：

未捕获的类型错误：无法在“窗口”上执行“滚动到”：需要 2 个参数，但只有 0 个存在。

它的来源是TweenMax.min.js:16

对此进行了一些研究，发现了一些帖子。看起来我缺少一个 GreenSock 插件，但我认为我的脚本标签应该已经选择了它。我已经尝试了很多方法来获取这个插件，但没有任何效果。例如，我尝试添加这一行：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>

有谁知道我如何将此插件包含到我的项目中？我强烈希望使用外部引用而不是将整个项目复制到我的服务器上。

4

1 回答 1

0

在上面的评论中完全归功于@Shikkediel，这里的解决方案只是在</body>标签之前添加这一行（其他脚本标签已经存在）：

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

因此，与使 ScrollMagic 与视差部分一起工作的完整脚本组是这样的（忽略调试标签进行调试）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include ScrollMagic and GSAP plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="js/scroll_magic.js"></script>
于 2015-11-20T16:53:06.667 回答