0

所以我对滚动捕捉感兴趣。我试着玩了一下，但没有用。我在 chrome 和 firefox 中尝试过，都没有成功。这是我的代码，请帮忙。

* {
  margin: 0;
  padding: 0;
}

body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-snap-points-y: repeat(100vh);
}

header {
  height: 100vh;
  width: 100%;
  background: #ff0000;
  scroll-snap-align: start;
}

div {
  height: 100vh;
  width: 100%;
  background: blue;
  scroll-snap-align: start;
}

section {
  height: 100vh;
  width: 100%;
  background: yellow;
  scroll-snap-align: start;
}
<body>
  <header>
    <h1>
      Header
    </h1>
  </header>
  <div>
    <h1>
      Div
    </h1>
  </div>
  <section>
    <h1>
      Section
    </h1>
  </section>
</body>

4

1 回答 1

1

我会尝试确保 scroll-snap 中的所有元素都相同，即 <div>[lots of other divs]</div>，或者，尽量不要将 body 用作包装器，看看是否有帮助。

这是一个有更好解释的文档

编辑：我对其进行了测试，包装器的大小需要与其子级相同，您可以忽略我所说的其余内容，但我仍然不建议下次使用主体作为包装器。

于 2021-05-20T07:13:17.773 回答