Scrollmagic ajax 页面加载问题

Question

大家好我目前正在设置一个 Wordpress 页面，我正在使用 Ajax 加载页面并使用 Scrollmagic 设置不同容器的触发点以产生一些视差效果。

在第一个页面视图中一切正常，视差滚动效果如预期发生，触发点已设置。

然而，当我使用菜单导航到新页面时，我得到了“Uncaught TypeError: Cannot read property 'hasAttribute' of null”。我猜测这可能是因为我没有删除已经存在的触发点或在添加新触发点之前删除它们，但我不确定这是否是问题所在。

我正在为 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

Answer 1

经过一番努力，我重写了我的滚动魔术场景，以便与 Ajax 函数一起初始化。我用过：

scene = scene.destroy(true);

每次调用 Ajax 时都会破坏场景并重置触发引脚。

Answer 2

我知道它有一些时间，但这可能会对某人有所帮助。遇到同样的问题并在每次 ajax 调用时创建控制器并在进行另一个 ajax 调用之前销毁它对我有用。示例：

// without resetting the scenes
controller = controller.destroy();

// with scene reset
controller = controller.destroy(true);

参考：Scrollmagic 控制器文档http://scrollmagic.io/docs/ScrollMagic.Controller.html#destroy

Scrollmagic ajax 页面加载问题

Scrollmagic ajax page load issue

javascript

coffeescript

scrollmagic