Nuxt 在页面转换之前向上滚动

Question

我已经创建了一个在路线变化之间运行的过渡：

.page-enter-active {
  position: absolute;
  width: 100%;
  //max-height: 100vh;
  overflow: hidden;
  animation: slideScaleRight 2s ease;
}
.page-leave-active {
  position: absolute;
  width: 100%;
  //max-height: 100vh;
  overflow: hidden;
  animation: scaleSlideRight 2s ease;
}

@keyframes scaleSlideRight {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(0.75) translateX(0);
    opacity: 0.5;
  }
  66% {
    transform: scale(0.75) translateX(150%);
  }
  100% {
    transform: scale(0.75) translateX(150%);
  }
}

@keyframes slideScaleRight {
  0% {
    transform: scale(0.75) translateX(-150%);
  }
  33% {
    transform: scale(0.75) translateX(-150%);
  }
  66% {
    opacity: 0.5;
    transform: scale(0.75) translateX(0);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

过渡运行很顺利，但我发现如果页面不在顶部位置，在离开之前，nuxt 会强制滚动到顶部，这让体验非常糟糕...

我猜 nuxt 在触发转换之前向上滚动，我真的很想在离开之前将页面保持在原处。

有什么想法吗？

Answer 1

您可以在上页设置scrollToTop: false（甚至在/layouts/default.vue？）以防止页面滚动，如the documentation。

如果您想要更详细的信息，您还可以查看 scrollBehavior。

Nuxt 在页面转换之前向上滚动

Nuxt scroll up before page transition

vue.js

nuxt.js