Next.js实现点击按钮滚动吸附到下一section的问题求助

现有代码问题梳理 #

• useRef初始化阶段直接调用document接口，Next.js服务端渲染时不存在浏览器DOM环境，会直接抛错
• 组件传参链路断裂：SnapScrollButton声明了btnRef属性但未实际接收，点击事件未绑定
• 滚动逻辑错误：现有scrollIntoView定位目标是按钮自身，无法跳转至下一个区块
• 缺少滚动吸附必要的CSS配置，无法实现吸附停靠效果
• 条件渲染逻辑bug：hasCopy函数固定返回文本为copy的段落，未渲染实际传入的文案内容

第一步：配置滚动吸附基础样式 #

在全局CSS文件（通常为globals.css）中添加以下样式，为滚动容器开启吸附能力：

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.snap-start {
  scroll-snap-align: start;
  min-height: 100vh;
}

• 给根滚动容器开启纵向强制吸附、平滑滚动
• 每个区块设置最小视口高度，保证吸附对齐效果正常触发

第二步：重构BodySection组件 #

无需提前获取所有区块元素，通过给当前区块绑定ref，点击时直接查找相邻下一个区块即可，所有DOM操作增加客户端环境判断，兼容SSR：

import React, { useRef } from 'react';
import Carousel from './Carousel';
import SnapScrollButton from './SnapScrollButton';

type BodySectionProps = {
  backgroundColor: string;
  heading: string;
  copy: string;
  hasCarousel: boolean;
};

const BodySection: React.FC<BodySectionProps> = (props) => {
  const { backgroundColor, heading, copy, hasCarousel } = props;
  const sectionRef = useRef<HTMLDivElement>(null);

  const scrollToNext = () => {
    // 非客户端环境直接返回，避免SSR报错
    if (typeof window === 'undefined' || !sectionRef.current) return;
    const nextSection = sectionRef.current.nextElementSibling;
    if (nextSection instanceof HTMLElement) {
      nextSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div 
      ref={sectionRef}
      className={`p-8 h-full snap-start ${backgroundColor}`}
    >
      <h1 className="text-7xl">{heading}</h1>
      {copy && <p>{copy}</p>}
      <Carousel hasCarousel={hasCarousel} />
      <SnapScrollButton onClick={scrollToNext} />
    </div>
  );
};

export default BodySection;

第三步：修复SnapScrollButton组件 #

简化组件职责，仅接收点击回调并绑定到按钮上，移除无效的内嵌脚本标签：

import React from 'react';

type SnapScrollButtonProps = {
  onClick: () => void;
};

const SnapScrollButton: React.FC<SnapScrollButtonProps> = ({ onClick }) => {
  return (
    <div className="text-center">
      <button 
        onClick={onClick}
        aria-label="滚动到下一个区块"
      >
        V
      </button>
    </div>
  );
};

export default SnapScrollButton;

扩展说明 #

• 若需要实现向上滚动按钮，逻辑完全一致，将查找下一个兄弟元素替换为查找上一个兄弟元素previousElementSibling即可
• 所有DOM操作要么放在useEffect回调中执行（useEffect仅在客户端挂载后触发），要么增加typeof window !== 'undefined'判断，即可完全规避Next.js SSR下DOM接口不存在的报错
• 无需提前遍历获取所有带snap-start类名的节点，基于当前区块查找相邻节点的方案逻辑更轻量，也不会出现动态增减区块时节点列表不更新的问题

内容的提问来源于stack exchange，提问作者Bungee Gum