Question

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

在第一页视图中，一切正常，视差滚动效果按预期发生，并设置了触发点。

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

我对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调用之前销毁了它，这对我来说很有效。示例：

select
  t1.income / coaslesce(monthly_datum.currency_rates,1.5)
, …
from
  income_data as t1
left join
  monthly_datum
on t1.month = monthly_datum.month

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

Scrollmagic ajax页面加载问题

2 个答案: