Question

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

的main.css

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

的index.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中。

感谢您的任何建议！

修改

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

未捕获的TypeError：无法在'Window'上执行'scrollTo'：2 需要参数，但只有0。

，其来源为TweenMax.min.js:16

有人挖掘了这个，发现了几个posts。看起来我错过了一个GreenSock插件，但我认为我的脚本标签本应该选择它。我已经尝试了很多东西来获得这个插件，但没有任何工作。例如，我尝试添加以下行：

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

有谁知道如何将这个插件包含到我的项目中？我更倾向于使用外部引用而不是将整个项目复制到我的服务器上。

Answer 1

在上面的评论中完全归功于@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>

ScrollMagic - 鼠标滚轮和触控板停止工作

1 个答案: