Question

我以这个article作为参考，特别是这个snippet的工作，但是在我的页面（下面的脚本）中，垂直快照滚动不起作用。你知道为什么吗？

.parent {
    height: 100vh;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}

section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
}

.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: grey;
}
.four {
  background-color: green;
}

<div class="parent row">
    <section class="one">
    </section>
    <section class="two">
    </section>
    <section class="three">
    </section>
    <section class="four">
    </section>
</div>

Answer 1

您的代码段中的主要问题是，显示的滚动条属于主体，在该主体中未定义任何滚动快照属性。这就是为什么滚动时没有任何捕捉行为的原因。

要达到预期效果，您需要

确保显示的滚动条属于父div
将父容器的overflow行为定义为scroll

在工作样本下面

请注意，请注意，捕捉属性（对于chrome）已经发展，并且您正在使用不推荐使用的功能。参见css scroll snap on google developers。

还请注意，此答案仅适用于铬，不涉及polyfill部分。这只是这里涉及的主要滚动概念

html, body {
  height: 100vh;
  overflow: hidden;
}

.parent {
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: grey;
}
.four {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent row">

    <section class="one">
</section>
<section class="two">
</section>
<section class="three">
</section>
<section class="four">
</section>

</div>

Answer 2

原始答案说将 overflow: hidden 直接放在 html 和 body 元素上，这会弄乱很多东西，即使用 position: sticky 的标头，这是一个漂亮的共同的概念。

另一种方法是将 scroll-snap-type 属性放在主体上，然后将 scroll-snap-align 属性放在需要滚动捕捉行为的元素上。

body, html {
  scroll-snap-type: proximity;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y proximity;
}

section {
  height: 100vh;
}

.row section {
  scroll-snap-align: start;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="row">
  <section class="one">
  </section>
  <section class="two">
  </section>
  <section class="three">
  </section>
  <section class="four">
  </section>
</div>
<section>
  <h2>This will not have sticky</h2>
</section>

CSS滚动捕捉，垂直不起作用

2 个答案: