Scrollmagic ajax 页面加载问题答案

【问题标题】：Scrollmagic ajax page load issueScrollmagic ajax 页面加载问题
【发布时间】：2017-01-03 07:38:30
【问题描述】：

大家好，我目前正在设置一个 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

【问题讨论】：

标签： javascript coffeescript scrollmagic

【解决方案1】：

我知道它有一些时间，但这可能会对某人有所帮助。有同样的问题，用每个 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

【讨论】：

【解决方案2】：

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

scene = scene.destroy(true);

每次我调用 Ajax 时都要销毁场景并重置触发引脚。

【讨论】：