有什么方法可以 redirect/auto-scroll 到我的 html 文档的下一部分并且不允许手动默认滚动吗？

Question

我目前正在制作一个网站，用户不应该在其中滚动，当他尝试滚动时，它会将他带到下一个部分，如下所示：

console.log('scroll to the next div');
/*Not sure if I can make the run snippet appear without js*/

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

   body {
         display: flex;
         flex-direction: column;
   }

  .sec1 {
    background: red;
    height: 100vh;
    width: 100vw;
  }

  .sec2 {
    background: blue;
    height: 100vh;
    width: 100vw;
  }

  .sec3 {
    background: steelblue;
    height: 100vh;
    width: 100vw;
  }

<! DOCTYPE html>
<html lang="en">
<head>
 <title> section scroll auto </title>
</head>
<body>
<section class="sec1">
    ...
</section> <!--on scroll, go to next div/section-->
<br>
<section class="sec2">
    ...
</section>

<section class="sec3">
    ...
</section>
</body>
</html>

有没有不使用 jQuery 就能实现的方法？我试过使用带有 href 的锚标记作为下一节的 id，但效率不高：它不能让我对滚动有太多控制。我对我能做什么有一个模糊的想法，但我想要一个明确的解释。谢谢。

Answer 1

您不需要任何 JS。您可以使用 scroll-snap 使用纯 CSS 来完成它。你可以阅读官方文档 here and look at a tutorial here

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
  scroll-snap-type: y mandatory;
}

  .sec1 {
    background: red;
    height: 100vh;
    width: 100vw;
  }

  .sec2 {
    background: blue;
    height: 100vh;
    width: 100vw;
  }

  .sec3 {
    background: steelblue;
    height: 100vh;
    width: 100vw;
  }
  
  .sec1, .sec2, .sec3 {
    scroll-snap-align: start;
  }

<! DOCTYPE html>
<html lang="en">
<head>
 <title> section scroll auto </title>
</head>
<body>
<section class="sec1">
    ...
</section> <!--on scroll, go to next div/section-->
<section class="sec2">
    ...
</section>

<section class="sec3">
    ...
</section>
</body>
</html>

有什么方法可以 redirect/auto-scroll 到我的 html 文档的下一部分并且不允许手动默认滚动吗？

Is there any way to redirect/auto-scroll to the next section of my html doc and not allowing manual default scroll?

html

javascript

scroll