ScrollMagic - 鼠标滚轮和触控板停止工作
ScrollMagic - Mousewheel and Trackpad Stopped Working
我正在使用 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 中都存在。
感谢任何建议!
编辑
有人向我指出,控制台中记录了一些我没有注意到的错误。在页面加载时生成的所有错误本质上都是我可以接受的调试错误。然而,当我试图用我的鼠标滚轮滚动页面时,突然间这个错误开始产生数百次:
Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2
arguments required, but only 0 present.
其来源是TweenMax.min.js:16
对此进行了深入研究,发现了一些 posts。看起来我缺少一个 GreenSock 插件,但我认为我的脚本标签应该已经找到了它。我已经尝试了很多方法来获得这个插件,但没有任何效果。例如,我尝试添加这一行:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
有谁知道如何将此插件包含到我的项目中?我强烈希望使用外部参考来完成它,而不是将整个项目复制到我的服务器上。
在上面的评论中完全归功于@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 进行视差部分滚动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 中都存在。
感谢任何建议!
编辑
有人向我指出,控制台中记录了一些我没有注意到的错误。在页面加载时生成的所有错误本质上都是我可以接受的调试错误。然而,当我试图用我的鼠标滚轮滚动页面时,突然间这个错误开始产生数百次:
Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present.
其来源是TweenMax.min.js:16
对此进行了深入研究,发现了一些 posts。看起来我缺少一个 GreenSock 插件,但我认为我的脚本标签应该已经找到了它。我已经尝试了很多方法来获得这个插件,但没有任何效果。例如,我尝试添加这一行:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
有谁知道如何将此插件包含到我的项目中?我强烈希望使用外部参考来完成它,而不是将整个项目复制到我的服务器上。
在上面的评论中完全归功于@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>