CSS滚动捕捉，垂直不起作用 [英] CSS Scroll Snapping, vertical not working

问题描述

我将此文章用作参考点，具体来说就是这项工作代码段，但是在我的页面（以下脚本）中，垂直快照滚动不起作用。您知道为什么吗？

I used this article as point of reference, in specific this working snippet, but in my page (script below) the vertical snap scrolling isn't working. Do you have any idea why?

.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>

推荐答案

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

The major problem you have in your code snippet, is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling.

要获得预期的结果，您需要

To achieve your expected result, you need to

1. 确保显示的滚动条属于父div


2. 将 overflow 行为定义为父容器以 scroll

1. Be sure that the displayed scrollbar belongs to the parent div
2. Define the overflow behaviour to the parent container to scroll

在工作样本下

请注意，请注意（对于chrome）的捕捉属性已经发展，并且您正在使用不赞成使用的功能。请参见 Google开发人员上的CSS滚动快照。

As a note, consider that snapping properties (for chrome) have evolved, and that you are using deprecated features. See the css scroll snap on google developers.

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

Note also that this answer deals only with chrome, without the polyfill part. It is just the main scroll concept that is involved here

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>

这篇关于CSS滚动捕捉，垂直不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！