title: Valid CSS alternative to scroll-snap-points
body: <p>Since the CSS properties <code>scroll-snap-points-x</code> and <code>scroll-snap-points-y</code> are deprecated, I was wondering if there still is a non-js solution for scroll snapping to fixed points.</p>
  <p>I have the following document:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;main&gt;
      &lt;header&gt;
        &lt;h2&gt;Headline 1&lt;/h2&gt;
        &lt;span&gt;Subtitle&lt;/span&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#1"&gt;Article 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#2"&gt;Article 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/header&gt;
    &lt;article id="1"&gt;
      &lt;header&gt;
        &lt;h2&gt;Article 1&lt;/h2&gt;
        &lt;span&gt;Subtitle&lt;/span&gt;
        &lt;p&gt;Introduction&lt;/p&gt;
      &lt;/header&gt;
      &lt;section&gt;
        &lt;h3&gt;Section 1&lt;/h3&gt;
        &lt;p&gt;Text&lt;/p&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;h3&gt;Section 2&lt;/h3&gt;
        &lt;p&gt;Text&lt;/p&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;h3&gt;Section 3&lt;/h3&gt;
        &lt;p&gt;Text&lt;/p&gt;
      &lt;/section&gt;
      &lt;/article&gt;
        &lt;article id="2"&gt;
          &lt;h2&gt;Article 2&lt;/h2&gt;
          &lt;span&gt;Subtitle&lt;/span&gt;
        &lt;p&gt;Text&lt;/p&gt;
      &lt;/article&gt;
    &lt;/main&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p>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?</p>