Barba.js : scrollRestoration 和 Wordpress 问题

Question

我正在尝试使用 barba.js 在我的主页和我的单个页面之间放置一些动画（如果某些东西在 wordpress 上效果更好请告诉我），实际上当我点击我的 post 时，单个页面像另一个页面一样滚动，即使我把

barba.hooks.before(() => {
  if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
  }
});

barba.init({
  debug: true,
  transitions: [{
    name: 'projet-transition',
    from: {
      namespace: [
        'home'
      ]
    },
    to: {
      namespace: [
        'projet'
      ]
    },
    enter(data) {
        console.log(data)
    },
    leave(data) {
      console.log(data)
    },
  }]
});

Answer 1

要在通过链接导航时重置滚动位置，您可以这样做：

barba.hooks.enter(() => {
    window.scrollTo(0, 0);
});

关于滚动恢复

History.scrollRestoration 影响前后历史导航。如果您需要在向后或向前导航时恢复滚动位置，请查看 this barba.js github issue。如果没有，我认为最好不要在 before 挂钩中将 scrollRestoration 设置为手动，该挂钩在每次页面转换时运行。您可以将它放在 barba 挂钩之外或 beforeOnce 挂钩中。

Barba.js : scrollRestoration 和 Wordpress 问题

Barba.js : scrollRestoration and Wordpress issue

javascript

wordpress

barbajs