小编kai*_*ias的帖子

仅在向下滚动时滚动对齐

我正在努力解决 CSS 中的滚动对齐问题。

有没有一种方法可以仅在一个垂直方向上使用滚动捕捉？

我想让它在向下滚动时捕捉到每个部分，但在再次向上滚动时不捕捉到。可以在 CSS 中实现吗？或者我需要一些 JavaScript 吗？

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

body {
    margin: 0;
    scroll-snap-type: y mandatory;
  }
  
  section {
    font-family: sans-serif;
    font-size: 12ch;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start; 
  }

Run Code Online (Sandbox Code Playgroud)

  <head>

    <!-- MAIN STYLE -->
    <link rel="stylesheet" href="style.css">
    

  </head>

    <main>
     <section>
        <h1>Hello!</h1>
     </section>

     <section>
        <h1>Toodles~</h1>
     </section>

     <section>
        <h1>Boodles~</h1>
     </section>
            
    </main>

</html>

Run Code Online (Sandbox Code Playgroud)

html javascript css scroll-snap

kai*_*ias

2022 03-31

8
推荐指数

1
解决办法

2662
查看次数