Scrollmagic ajax страница загрузки проблема
Привет, ребята, я в настоящее время настраиваю страницу Wordpress, где я загружаю на страницах с Ajax и использую Scrollmagic, чтобы установить точки срабатывания для разных контейнеров, чтобы сделать некоторые эффекты параллакса.
На первом просмотре страницы все работает отлично, эффекты прокрутки параллакса происходят, как и ожидалось, и точки запуска установлены.
Однако когда я затем использую меню для перехода на новую страницу, я получаю "Uncaught TypeError: Cannot read property 'hasAttribute' of null
Msgstr "Я полагаю, что это может быть связано с тем, что я не удаляю уже существующие триггерные точки или удаляю их перед добавлением новых, но я не уверен, что это проблема.
Я использую следующую функцию для триггеров Scrollmagic, которая запускается при готовности документа:
initSections: ->
controller = new ScrollMagic.Controller()
for $section in $('.page-row, .scroll-trigger')
do ->
scene = new (ScrollMagic.Scene)(
triggerElement: $section
triggerHook: 0.75
)
.setClassToggle($section, 'in-view')
.addIndicators()
.addTo(controller)
Я предполагаю, что мне как-то нужно заново инициализировать триггеры всякий раз, когда новая страница загружается с Ajax. Что я делаю через следующий код:
bindNavLinks: ->
# Bind initial url
url = window.location.href
window.history.pushState({path: url}, url, url)
$.ajaxSetup({cache:false})
$('nav.main li a, .page_item a').click (e) =>
e.preventDefault()
pageUrl = $(e.target).attr('href')
if pageUrl != window.location.href
window.history.pushState({path: pageUrl}, pageUrl, pageUrl)
@loadUrl(pageUrl)
loadUrl: (url) ->
setTimeout (->
$('#main').load url + ' #main > *', (response, status, xhr) ->
),2000
Смотрите код пера здесь: http://codepen.io/fennefoss/pen/RKbdOe
1 ответ
После некоторых трудностей я переписал свои магические сцены прокрутки для инициализации вместе с функцией Ajax. Я использовал:
scene = scene.destroy(true);
Чтобы уничтожить сцены и сбросить контакты триггера каждый раз, когда я звонил Ajax.
Я знаю, что у него есть время, но это может кому-то помочь. У меня была такая же проблема: создание контроллера с каждым вызовом ajax и его уничтожение перед повторным вызовом ajax - вот что сработало для меня. Пример:
// without resetting the scenes
controller = controller.destroy();
// with scene reset
controller = controller.destroy(true);
Ссылка: документация Scrollmagic Controller http://scrollmagic.io/docs/ScrollMagic.Controller.html