时间戳

首页 > 解决方案 > css scroll-snap 属性跳过后续页面

html - css scroll-snap 属性跳过后续页面

问题描述

我目前正在开发一个共有三页的网站。我的想法是添加一个水平滚动捕捉效果。我的问题是它没有捕捉到下一页，而是页面被跳过并捕捉到最后一页。我使用强制捕捉点。

这是我的代码。

HTML

<!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">
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <title></title>
</head>
<body>
    
    <div class="container">
        <section>
            <h1>Page One</h1>
        </section>
        <section>
            <h1>Page Two</h1>
        </section>
        <section>
            <h1>Page Three</h1>
        </section>
    </div>

</body>
</html>

SCSS

body {
  width: 100vw;
  height: 100vh;
  margin: 0;

  .container {
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow: hidden;
    overflow-x: scroll;
    display: flex;

    section {
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;

      &:nth-of-type(1) {
        background-color: rgb(28, 28, 28);
        color: beige;
      }

      &:nth-of-type(2) {
        background-color: rgb(38, 38, 38);
        color: beige;
      }

      &:nth-of-type(3) {
        background-color: rgb(48, 48, 48);
        color: beige;
      }

      h1 {
        font-family: Arial, Helvetica, sans-serif;
      }
    }
  }
}

标签： htmlcss

解决方案

您描述的行为是默认行为：

默认情况下，滚动捕捉仅在用户停止滚动时才会启动，这意味着他们可以在停止滚动之前跳过几个捕捉点。

为了在每个“页面”（滚动容器的每个子项）处停止滚动，有一个名为 的设置scroll-snap-stop: always，必须将其应用于滚动容器的子项。但是，这并不适用于所有浏览器。

推荐阅读