【CSS】使用 scroll snap 实现页面的垂直大屏滚动

最新推荐文章于 2024-08-26 14:00:34 发布

努力挣钱的小鑫

最新推荐文章于 2024-08-26 14:00:34 发布

阅读量711

点赞数 1

分类专栏： HTML/CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/IAIPython/article/details/138078247

版权

HTML/CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。

scroll-snap-type

使用 scroll snap 也可以用于垂直滚动，全屏展示就是一个很好的例子:

在这里插入图片描述

<main>
  <section class="section section-1"></section>
  <section class="section section-2"></section>
  <section class="section section-3"></section>
  <section class="section section-4"></section>
  <section class="section section-5"></section>
</main>

main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}