'Valid CSS alternative to scroll-snap-points

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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Valid CSS alternative to scroll-snap-points

Sources

Related Questions