0

Since the CSS properties scroll-snap-points-x and scroll-snap-points-y are deprecated, I was wondering if there still is a non-js solution for scroll snapping to fixed points.

I have the following document:

body, main, header, article, section {
  height: 100vh;
}

body, header, section {
  overflow: hidden;
}

main, article {
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

header, article, section {
  scroll-snap-align: start;
}

ul {
  display: flex;
  gap: 1em;
}

li {
  list-style-type: none;
}
<body>
  <main>
    <header>
      <h2>Headline 1</h2>
      <span>Subtitle</span>
      <ul>
        <li><a href="#1">Article 1</a></li>
        <li><a href="#2">Article 2</a></li>
      </ul>
    </header>
  <article id="1">
    <header>
      <h2>Article 1</h2>
      <span>Subtitle</span>
      <p>Introduction</p>
    </header>
    <section>
      <h3>Section 1</h3>
      <p>Text</p>
    </section>
    <section>
      <h3>Section 2</h3>
      <p>Text</p>
    </section>
    <section>
      <h3>Section 3</h3>
      <p>Text</p>
    </section>
    </article>
      <article id="2">
        <h2>Article 2</h2>
        <span>Subtitle</span>
      <p>Text</p>
    </article>
  </main>
</body>

As you may have noticed, when scrolling down without moving the mouse, you won't see the sections of Article 1 but just it's header. If you stop scrolling at Article 1's header and move the cursor you can see the sections when scrolling further down.

Is there a CSS-only way to show the sections when scrolling down without having to move the cursor, or do i have to change the document's structure or use JS to achieve that?

Cédric
  • 2,239
  • 3
  • 10
  • 28
AbgrundLemur
  • 35
  • 6
  • I've never used scroll-snaps, But I've found [this site to be great for all things CSS](https://css-tricks.com/practical-css-scroll-snapping/) – fnostro May 13 '22 at 19:28
  • `scroll-snap-align: center` or `end` should allow you to scroll past the headers. Or `start` of `

    `

     – zer00ne May 14 '22 at 08:49

0 Answers0