CSS实现全屏滚动用什么属性，具体代码是什么-群英

上一篇：CSS怎样实现网页背景渐变并自适应全屏效果下一篇：CSS复杂选择器有哪些，其常见的属性如何用

这篇文章给大家分享的是“CSS实现全屏滚动用什么属性，具体代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

最近研究CSS的时候发现了 仅使用两个CSS属性就可以制作出全屏滚动效果 ，这两个属性就是：

scroll-snap-type
scroll-snap-align

使用它就可以实现 fullpage.js 这种全屏滚动效果，其实，这种全屏滚动效果的理论非常简单，就是使用js监听界面滚动，当界面滚动到某个值时就让界面持续滚动到下一个屏幕，但是！要考虑到屏幕尺寸大小带来的兼容性问题就是一件非常麻烦的事情。

今天说的这两个属性并不能替代 fullpage.js ，有下面2个原因：

它们在浏览器上面存在兼容性问题。
CSS属性无法监听事件，也就无法提供动画完成时的回调函数。

1. 兼容性

目前主流的浏览器都已经支持了这两个CSS属性，可以放心的使用。如果你需要兼容IE浏览器，那么请选择 fullpage.js 。

2. 使用

使用的方法其实很简单， scroll-snap-type 属性放在 需要全屏滚动的容器的父容器上 ，而 scroll-snap-align 则需要 放在全屏滚动的容器上 ，多说无益，我们直接来看一下代码就可以很清楚的知道如何使用这两个CSS属性。

整个网页的完整代码很简单，下面直接将它贴上来：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS scroll snap</title>
    <style>
      body {
        margin: 0;
      }

      .container {
        height: 100vh;
        overflow-y: scroll;
        /* 在父容器上面使用 scroll-snap-type 属性 */
        scroll-snap-type: y mandatory;
      }

      section {
        padding: 112px;
        height: calc(100vh - 224px);
        color: white;
        /* 在需要滚动的容器上使用 scroll-snap-align 属性 */
        scroll-snap-align: start;
      }

      section:nth-of-type(1) {
        background-color: #60af15;
      }

      section:nth-of-type(2) {
        background-color: #158baf;
      }

      section:nth-of-type(3) {
        background-color: #af1581;
      }

      section h3 {
        font-size: 48px;
      }

      section p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus asperiores assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercitationem iste maiores placeat reprehenderit voluptates
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error et explicabo harum in ipsum iste labore laborum libero magni
          maiores nam non nostrum nulla officia pariatur quam quasi quia quo
          recusandae reprehenderit saepe similique vel vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
    </div>
  </body>
</html>

可以看到代码并不复杂，下面我们就着重讲解一下这两个CSS属性。