Next.js与snapscroll路由切换时无法滚动至页面顶部问题

问题根源 #

使用height:100vh的容器配合Snapscroll时，路由切换后浏览器不会自动重置滚动位置，加上Sanity.js动态加载的内容无法提前设置锚点，导致页面默认停留在上一页的滚动位置，看不到首屏内容。

可行解决方案 #

1. 路由切换时强制滚动到顶部

针对常用路由库（如React Router、Vue Router），添加全局滚动重置逻辑：

React Router v6+ 示例

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // 直接重置浏览器滚动位置
    window.scrollTo(0, 0);
    // 如果Snapscroll有全局实例，调用其重置/刷新方法
    if (window.snapscrollInstance) {
      window.snapscrollInstance.refresh();
    }
  }, [pathname]);

  return null;
}

// 在App组件的Router内部挂载该组件
<Router>
  <ScrollToTop />
  {/* 你的路由页面组件 */}
</Router>

Vue Router 示例

// 在router/index.js中添加全局钩子
router.afterEach((to, from) => {
  window.scrollTo(0, 0);
  // 若Snapscroll实例可访问，执行刷新
  if (window.snapscrollInstance) {
    window.snapscrollInstance.refresh();
  }
});

2. 调整容器样式，避免全局滚动冲突

将容器的height:100vh改为min-height:100vh，同时确保Snapscroll的滚动上下文正确绑定到容器：

.snap-container {
  min-height: 100vh;
  /* 保留Snapscroll所需的其他样式 */
  scroll-snap-type: y mandatory;
  overflow-y: auto;
}

这种调整能减少全局滚动对Snapscroll的干扰，同时保证容器高度至少占满视口。

3. 监听Sanity内容加载完成后重置滚动

由于内容是动态加载的，在通用区块容器组件中监听内容更新，完成后重置滚动：

// React 通用区块容器示例
import { useEffect } from 'react';

function SanityBlockContainer({ blocks }) {
  useEffect(() => {
    // 当区块数据更新（路由切换后新内容加载），滚动到容器顶部
    const container = document.querySelector('.snap-container');
    if (container) {
      container.scrollTop = 0;
      // 调用Snapscroll实例的刷新方法，让它重新计算滚动点
      if (window.snapscrollInstance) {
        window.snapscrollInstance.refresh();
      }
    }
  }, [blocks]);

  return (
    <div className="snap-container">
      {blocks.map((block, idx) => (
        <div key={idx} className="snap-item">
          {/* 渲染单个Sanity区块 */}
          {renderBlock(block)}
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 若Snapscroll是通过局部实例初始化的，需通过ref或全局变量确保能访问到实例，才能调用refresh()或reset()方法
• 部分情况下window.scrollTo可能被Snapscroll的滚动逻辑覆盖，此时优先调用Snapscroll自身的滚动到首个区块的方法（参考其官方文档的API）

内容的提问来源于stack exchange，提问作者Eoin Payne