Javascript ScrollMagic-鼠标滚轮和触摸板停止工作_Javascript_Html_Css_Gsap_Scrollmagic

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

javascript html css

Javascript ScrollMagic-鼠标滚轮和触摸板停止工作,javascript,html,css,gsap,scrollmagic,Javascript,Html,Css,Gsap,Scrollmagic,我正在使用ScrollMagic做视差部分的滚动。我有它的工作视觉，但现在页面已停止滚动时，使用鼠标滚轮或轨迹板。它滚动的唯一方式是拖动右侧的滚动条 main.css .parallaxParent { height: 100vh; overflow: hidden; } .parallaxParent > * { height: 200%; position: relative; top: -100%; } // init controller

我正在使用ScrollMagic做视差部分的滚动。我有它的工作视觉，但现在页面已停止滚动时，使用鼠标滚轮或轨迹板。它滚动的唯一方式是拖动右侧的滚动条

main.css

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

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

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>

这一切都遵循他们的教程，这是完美的工作。很明显我做错了什么，但我不知道是什么。这个问题在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>

有人知道我如何将这个插件包含到我的项目中吗？我非常喜欢使用外部引用，而不是将整个项目复制到我的服务器上。

在上面的评论中，完全归功于@Shikkediel，这里的解决方案只是在

标记之前添加这一行（其他脚本标记已经存在）：

因此，与ScrollMagic在视差部分工作相关的完整脚本组如下（忽略调试标签进行调试）：

在上面的评论中完全归功于@Shikkediel，这里的解决方案只是在

标记之前添加这一行（其他脚本标记已经存在）：

因此，与ScrollMagic在视差部分工作相关的完整脚本组如下（忽略调试标签进行调试）：

您是否有现场演示？很难像这样调试…控制台报告了一些与视差相关的错误。它说缺少

plugins/debug.addIndicator.js

。还有一些元素没有找到-

#parallax

，加上数字3-5…谢谢你指出这一点。真不敢相信，我把目光从控制台输出上移开，却没有注意到这一点。这些错误都是我可以接受的调试输出。然而，当我开始用鼠标滚轮滚动时，会产生数百个相同的错误。我不知道如何解决这个错误，所以我编辑了我的帖子来解释这个行为。可能没有关系，但是jQuery被加载了三次——底部的脚本在

//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js之外。你可能有现场演示吗？很难像这样调试…控制台报告了一些与视差相关的错误。它说缺少plugins/debug.addIndicator.js
。还有一些元素没有找到-#parallax
，加上数字3-5…谢谢你指出这一点。真不敢相信，我把目光从控制台输出上移开，却没有注意到这一点。这些错误都是我可以接受的调试输出。然而，当我开始用鼠标滚轮滚动时，会产生数百个相同的错误。我不知道如何解决这个错误，所以我编辑了我的帖子来解释这个行为。可能与此无关，但是jQuery被加载了三次——底部的脚本在
//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

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