移动端实现TikTok式食谱区块滚动效果求助（CSS scroll-snap问题）

问题 #

需要在视口宽度小于500px的移动端实现类似TikTok的垂直滚动效果：屏幕每次仅显示一个.recipe区块，滚动时自动切换到下一个区块。现有代码尝试使用CSS scroll-snap属性但未生效，相关代码如下：

现有CSS（移动端媒体查询部分） #

@media only screen and (max-width: 550px) {
  .recipe {
    background-color: whitesmoke;
    border: hidden;
    border-radius: 1rem;
    width: 100%;
    display: inline;
    text-align: center;
  }
  section h2 {
    font-size: 2.2rem;
  }
  section h5 {
    font-size: 1.35rem;
  }
  #container {
    white-space: nowrap;
  }
  input[type=text] {
    width: 80%;
    text-align: center;
    margin-top: 0;
  }
  h3 {
    font-size: 1.6rem;
  }
  p {
    font-size: 1.25rem;
  }
  html {
    scroll-snap-type: y mandatory;
  }
  .recipe {
    scroll-snap-align: start;
  }
}

对应HTML结构 #

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="../css/homepage.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <title>MyCookBook</title>
</head>
<body>
  <header>
    <div class="header">
      <h1>MyCookBook</h1>
      <input type="text" placeholder="Search..">
    </div>
  </header>
  <div id="container">
    <section class="recipe">
      <!-- 食谱内容 -->
    </section>
    <section class="recipe">
      <!-- 食谱内容 -->
    </section>
    <section class="recipe">
      <!-- 食谱内容 -->
    </section>
  </div>
  <footer>
  </footer>
</body>
</html>

解决方案 #

现有代码的核心问题是滚动容器配置错误、区块布局不符合垂直滚动要求，修改以下几点即可实现需求：

1. 调整滚动容器：将scroll-snap-type从html移到#container，同时给容器设置固定高度（占满视口）和垂直滚动属性，让它成为真正的滚动容器。
2. 修正区块布局：移除#container的white-space: nowrap，将.recipe的display改为block，并设置高度为100vh，确保每个区块占满整个视口。
3. 清除默认边距：避免body和html的默认边距导致滚动区域异常。

修改后的移动端媒体查询CSS代码：

@media only screen and (max-width: 500px) {
  /* 清除全局默认边距，避免滚动区域偏移 */
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .recipe {
    background-color: whitesmoke;
    border: hidden;
    border-radius: 1rem;
    width: 100%;
    display: block; /* 改为块级元素，占满宽度 */
    height: 100vh; /* 每个区块占满视口高度 */
    text-align: center;
    scroll-snap-align: start; /* 保持对齐规则 */
    overflow-y: auto; /* 允许单个食谱内部滚动（如果内容超出视口） */
    box-sizing: border-box; /* 避免内边距/边框撑大区块 */
    padding: 1rem;
  }

  section h2 {
    font-size: 2.2rem;
  }
  section h5 {
    font-size: 1.35rem;
  }

  #container {
    /* 移除横向排列的设置 */
    /* white-space: nowrap; */
    height: calc(100vh - 80px); /* 减去header高度，避免被遮挡，根据实际header高度调整 */
    overflow-y: auto; /* 开启垂直滚动 */
    scroll-snap-type: y mandatory; /* 设置垂直滚动吸附 */
  }

  input[type=text] {
    width: 80%;
    text-align: center;
    margin-top: 0;
  }
  h3 {
    font-size: 1.6rem;
  }
  p {
    font-size: 1.25rem;
  }
}

关键修改说明 #

• #container设置height: calc(100vh - 80px)：如果header有固定高度，需要减去对应值，避免食谱区块被header遮挡；如果header是自适应高度，可以调整为height: 100vh后给.recipe添加margin-top。
• .recipe添加overflow-y: auto：如果单个食谱内容超过视口高度，允许用户在区块内部滚动，不影响整体的滚动切换。
• scroll-snap-type: y mandatory：确保滚动时自动吸附到下一个区块的起始位置。

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