Css 实现全屏滚动效果

最新推荐文章于 2024-04-15 16:28:16 发布

前端-小白123

最新推荐文章于 2024-04-15 16:28:16 发布

阅读量674

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_67053382/article/details/132361374

版权

要实现这个需求，其实只需要两个Css属性即可。废话不都说，直接上示例：

设置全屏滚动需要使用到两个属性：

scroll-snap-type，设置滚动贴合的方向和方式。
scroll-snap-align，设置滚动贴合的对齐方式。

scroll-snap-type：

要实现滚动捕捉行为，scroll-snap-type必须在父元素上设置该属性，并且scroll-snap-align必须在子元素上设置该属性。

scroll-snap-align：

要实现滚动捕捉行为，scroll-snap-align必须在子元素上设置该属性，并且scroll-snap-type必须在父元素上设置该属性。

接下来代码展示：

  <!DOCTYPE html>
  <html lang="en">
  <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>Document</title>
  </head>

  <style>
  html,
  body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; /* 添加平滑滚动效果 */
  }

  main {
    overflow: scroll; /* overflow 为 scroll，来把滚动条设置到 main 元素上 */
    height: 100vh; 
    scroll-snap-type: y mandatory; /* scroll-snap-type 需要两个值，第一个值为滚动贴合的方向，y 表示纵向滚动贴合，第二个值为贴合方式，mandatory 表示强制滚动，用户只要一滚动鼠标，下一屏内容就直接滚动上来进行贴合。 */
    scroll-padding: 80px; /* 空车顶部菜单的高度 */
    scroll-behavior: smooth; /* 添加平滑滚动效果 */
  }

  main::-webkit-scrollbar {
    display: none;
  }

  h1 { 
    height: 80px;
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  /* 每个 section 都设置为占满全屏： */
  section {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    scroll-snap-align: center;
  }

  footer {
    display: flex;
    padding: 60px;
    justify-content: space-between;
    scroll-snap-align: start;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  </style>

  <body>
    <main class="main">
      <h1>H1标题</h1>
      <section style="background: lightblue;">页面内容1</section>
      <section style="background: chartreuse;">页面内容2</section>
      <section style="background: burlywood;">页面内容3</section>
      <section style="background: aquamarine;">页面内容4</section>
      <footer>
        <ul>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
        </ul>
        <ul>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
        </ul>
        <ul>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
        </ul>
        <ul>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
          <li>foooter</li>
        </ul>
      </footer>
    </main>

  </body>
  </html>

这样就可以实现通过Css属性实现全屏滚动效果了。

详细用法及讲解可以去峰华前端工程师那里了解：CSS Snap Scroll 滚动贴合特效实现 - 峰华前端工程师