使用TailwindCSS Scroll Snap实现滚动吸附失效问题求助

核心问题分析 #

1. 嵌套滚动容器冲突：外层已设置h-screen overflow-scroll作为滚动容器，内层又重复添加相同滚动属性，导致滚动行为被内层拦截，外层滚动吸附规则无法生效。
2. Section1高度与吸附标记错误：Section1外层div仅加snap-start但未设置h-screen，且内部图片用fixed定位，导致Section1实际高度无法撑满视口，滚动吸附没有有效触发区域。
3. 冗余滚动属性：内层div无需重复设置snap-y snap-mandatory，这些属性只需在最外层滚动容器上定义。

修复步骤 #

• 移除内层div的h-screen overflow-scroll snap-y snap-mandatory属性，仅保留snap-start和布局类。
• 给Section1外层div添加h-screen，确保它占据完整视口高度，让滚动容器识别到这个吸附项。
• 确保所有需吸附的子项（Section1、内层div）直接作为外层滚动容器的子元素，且每个子项都设置snap-start并撑满视口高度。

修改后的代码 #

HomeComponent.js

import Section1 from "./section1";
import Sections from "./sections";

function HomeComponent() {
  return (
    <div className="snap-y snap-mandatory h-screen overflow-scroll scroll-smooth no-scrollbar">
      <Section1 />
      <div className="snap-start h-screen w-full mx-auto">
        <Sections />
      </div>
    </div>
  );
}

export default HomeComponent;

Section1组件

return (
  <div className={`snap-start h-screen ${imageIndex === images.length ? "opacity-0" : "opacity-100"}`}>
    {images.map((img, index) => (
      <section
        key={index}
        className="relative h-screen flex"
        style={{ opacity: index === imageIndex ? 1 : 0 }}
        ref={index === images.length - 1 ? ref : null}
      >
        <div className="relative flex">
          <Image
            alt="Mountains"
            src={img}
            placeholder="blur"
            quality={100}
            className="fixed h-screen object-cover w-full top-0"
          />
        </div>
      </section>
    ))}
    <div className="fixed left-10 top-1/3 flex items-center text-[30px] md:text-[50px] font-bold text-gray-100 bg-black p-3">
      <Image
        src={Logo}
        alt="fourseason logo"
        width={0}
        height={0}
        className="w-[30px] md:w-[70px] mr-1"
      />
      FourSeason
    </div>
  </div>
);

额外说明 #

• 需确保<Sections />组件内部每个需吸附的区块也添加snap-start并设置h-screen，才能触发对应区块的滚动吸附。
• no-scrollbar类可隐藏原生滚动条，保持界面美观。

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