Question

我不知道是什么在中断滚动快照。我已经检查了很多关于SO的其他主题，但是没有一个解决了这个问题。我也尝试更改父元素和子元素的溢出，高度/宽度属性。

html,
body {
  height: 100%;
  width: 100%;
  max-width: 100%;
}

body {
  z-index: 0;
  scroll-behavior: smooth;
  transition: background-color 1s ease;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin: 0 auto;
  overflow: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

section {
  max-height: 100vh;
  height: 100vh;
  width: 90vw;
  border: 1px solid red;
  margin: 0 auto;
  scroll-snap-align: start;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <main dir="ltr">
    <section>
      <h1>content1</h1>
    </section>
    <section>
      <h1>content2</h1>
    </section>
  </main>
</body>

</html>

Answer 1

为清楚起见，此处略有简化。主要更改是将flex-direction返回到row，添加了flex-wrap: wrap属性，并制作了main容器height: 100%。

在您的原始代码中，主容器只是简单地增长到flex项的高度，从而触发了主体而不是该容器的溢出。

带有flex-direction: row的原始解决方案：

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  scroll-behavior: smooth;
}

main {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 100%;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  width: 90vw;
  border: 1px solid red;
  margin: 0 auto;
}

main section {
  scroll-snap-align: start;
}

<head>
</head>

<body>
  <main dir="ltr">
    <section>
      <h1>content1</h1>
    </section>
    <section>
      <h1>content2</h1>
    </section>
  </main>
</body>

</html>

修改：

仔细检查后，我意识到，如果给弹性项目一个flex-basis，实际上没有必要更改弹性方向。默认情况下，flex-box会尝试使其子级适合其自身高度，因此您需要指定其起始大小。您还需要提供flex-grow和flex-shrink，以控制元素相对于容器的大小调整。

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  scroll-behavior: smooth;
}

main {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100%;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

section {
  flex-basis: 100vh;
  flex-grow: 1;
  flex-shrink: 0;
  width: 90vw;
  border: 1px solid red;
  margin: 0 auto;
}

main section {
  scroll-snap-align: start;
}

<html>
<body>
  <main dir="ltr">
    <section>
      <h1>content1</h1>
    </section>
    <section>
      <h1>content2</h1>
    </section>
  </main>
</body>
</html>

这是获得相同基本结果的另一种方法；容器将溢出并触发滚动行为。

CSS滚动捕捉未捕捉到部分

1 个答案: