ScrollMagic - 鼠標滾輪和觸控板停止工作

我使用ScrollMagic在此之後執行視差部分滾動tutorial。我讓它在視覺上工作，但現在當使用鼠標滾輪或觸控板時，頁面停止滾動。它將滾動的唯一方法是拖動右側的滾動條。ScrollMagic - 鼠標滾輪和觸控板停止工作

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

感謝您的任何建議！

編輯

有人向我指出的，有在我沒有注意到控制檯一些錯誤日誌。所有在頁面加載時產生的錯誤實質上都是調試錯誤，我很好。然而，當我試圖用我的鼠標滾輪滾動頁面，突然這個錯誤開始得到字面上產生數百次：

其來源是TweenMax.min.js:16

做了一些挖掘到這一點，發現了幾個posts。它看起來像我缺少一個GreenSock插件，但我認爲我的腳本標籤應該挑選了它。我試過很多東西來獲得這個插件，但沒有任何工作。例如，我試圖添加下面這行：

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

有誰知道我可以如何將這個插件包含到我的項目中？我強烈希望使用外部引用來完成，而不是將整個項目複製到我的服務器上。

來源

2015-11-19 Alex

你有一個現場演示，也許？很難像這樣調試... – Shikkediel

控制檯報告了一些與視差有關的錯誤。它說'plugins/debug.addIndicator.js'丟失。並且找不到一些元素 - 附加數字3-5的'＃parallax' ... – Shikkediel

感謝您指出這一點。不能相信我把我的眼睛從控制檯的輸出中取出，並沒有注意到。這些錯誤都是我很好的調試輸出。但是，當我用鼠標滾輪開始滾動時，會產生數百個相同的錯誤。我無法弄清楚如何解決這個錯誤，所以我編輯了我的帖子來解釋這種行爲。 – Alex

擁有完全相信上述意見@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-20 16:53:06 Alex

ScrollMagic - 鼠標滾輪和觸控板停止工作

回答

相關問題