CSS 掘金：巧妙实现 fullPage 整屏滚动贴合效果

当我在使用 CSS 实现 fullPage 整屏滚动时，遇到一个问题，当页面滚动到某一屏时，页面会出现一段空白区域，页面未完全贴合屏幕。为了解决这个问题，我开始研究 CSS 属性，最终找到了一个解决办法，使用 scroll-snap-type 属性可以完美解决这个问题。

scroll-snap-type 属性定义了在滚动容器中临时点如何被严格执行。它有四个值：

• none：不使用滚动贴合。
• mandatory：强制执行滚动贴合。
• proximity：在接近临时点时执行滚动贴合。
• inherit：继承父元素的 scroll-snap-type 属性值。

要实现 fullPage 整屏滚动贴合效果，我们需要将 scroll-snap-type 属性设置为 mandatory。这样，当页面滚动到某一屏时，页面就会严格贴合屏幕，不会出现空白区域。

除了 scroll-snap-type 属性，我们还需要设置 scroll-snap-align 属性。该属性定义了临时点在滚动容器中的对齐方式。它有四个值：

• none：不使用对齐。
• start：将临时点对齐到滚动容器的顶部或左侧。
• center：将临时点对齐到滚动容器的中间。
• end：将临时点对齐到滚动容器的底部或右侧。

要实现 fullPage 整屏滚动贴合效果，我们需要将 scroll-snap-align 属性设置为 start。这样，当页面滚动到某一屏时，页面就会从顶部开始贴合屏幕。

最后，我们需要设置 overflow-y 和 overflow-x 属性。这两个属性定义了当内容超出滚动容器时如何处理。我们需要将 overflow-y 属性设置为 hidden，将 overflow-x 属性设置为 auto。这样，当页面滚动到最顶部或最底部时，滚动条就会消失。

以下是实现 fullPage 整屏滚动贴合效果的完整 CSS 代码：

html, body {
  height: 100%;
}

.container {
  scroll-snap-type: mandatory;
  scroll-snap-align: start;
  overflow-y: hidden;
  overflow-x: auto;
}

.page {
  height: 100vh;
}

现在，你可以使用 CSS 实现 fullPage 整屏滚动贴合效果了。是不是很简单？赶紧试试吧！