ScrollMagic - перестали работать колесико мыши и трекпад

Question

ScrollMagic - перестали работать колесико мыши и трекпад

Я использую 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.

Спасибо за любой совет!

РЕДАКТИРОВАТЬ

Мне было указано, что в консоли произошла ошибка, которую я не заметил. Все ошибки, которые генерируются при загрузке страницы, по сути являются ошибками отладки, с которыми я в порядке. Однако, когда я пытаюсь прокрутить страницу с помощью колесика мыши, эта ошибка внезапно начинает генерироваться буквально сотни раз:

Uncaught TypeError: Не удалось выполнить 'scrollTo' в 'Window': требуется 2 аргумента, но присутствует только 0.

и его источник TweenMax.min.js:16

Покопался и нашел пару постов. Похоже, мне не хватает плагина GreenSock, но я подумал, что мои скриптовые теги должны были это подхватить. Я пробовал несколько вещей, чтобы получить этот плагин, но ничего не работает. Например, я попытался добавить эту строку:

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

Кто-нибудь знает, как я могу включить этот плагин в свой проект? Я бы предпочел сделать это с внешней ссылкой, а не копировать весь проект на мой сервер.

1

javascript html css greensock scrollmagic

Источник

user1024973 19 ноя '15 в 05:00

1 ответ

Решение

Другие вопросы по тегам javascript html css greensock scrollmagic

user1024973 20 ноя '15 в 16:53 2015-11-20 16:53 · Accepted Answer · 2015-11-20 16:53

С полным уважением к @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>