title: CSS Scroll Snap get active Item
body: <p>I have a problem with <a href="https://css-tricks.com/practical-css-scroll-snapping/" rel="nofollow noreferrer">CSS scroll snap</a>. I want to detect the snapped element via JavaScript and assign it, e.g., a CSS class or similar.</p>
  <p>Unfortunately, I haven't found a way to detect the snapped element yet. Background: I have a list with subitems, which are scrolled, always the middle item in the list should be highlighted:</p>
  <h3>Layout</h3>
  <p><img src="https://i.stack.imgur.com/W2zvX.png" alt="Layout" /></p>
  <p>I already tested the intersection observer with rootMargin to detect the vertically centered element, but it’s more buggy than useful.</p>
  <h3>HTML</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;timeline-menu-dropdown-years-list-container&quot;&gt;
      &lt;ul class=&quot;timeline-menu-dropdown-years-list timeline-menu-dropdown-years-text&quot; id=&quot;yearcontainer&quot;&gt;
          &lt;li id=&quot;2010&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2010&quot;&gt;2010&lt;/li&gt;
          &lt;li id=&quot;2009&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2009&quot;&gt;2009&lt;/li&gt;
          &lt;li id=&quot;2008&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2008&quot;&gt;2008&lt;/li&gt;
          &lt;li id=&quot;2007&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2007&quot;&gt;2007&lt;/li&gt;
          &lt;li id=&quot;2006&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2006&quot;&gt;2006&lt;/li&gt;
          &lt;li id=&quot;2005&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2005&quot;&gt;2005&lt;/li&gt;
          &lt;li id=&quot;2004&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2004&quot;&gt;2004&lt;/li&gt;
          &lt;li id=&quot;2003&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2003&quot;&gt;2003&lt;/li&gt;
          &lt;li id=&quot;2002&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2002&quot;&gt;2002&lt;/li&gt;
          &lt;li id=&quot;2001&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2001&quot;&gt;2001&lt;/li&gt;
          &lt;li id=&quot;2000&quot; class=&quot;timeline-dropdown-year&quot; data-target=&quot;year-2000&quot;&gt;2000&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>CSS</h3>
  <pre class="lang-css prettyprint-override"><code>.timeline-menu-dropdown-years-list-container {
    max-height: 250px;
    overflow: scroll;
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */
    padding-top: 45%;
    padding-bottom: 40%;
    scroll-padding-top: 45%;
    scroll-padding-bottom: 40%;
  }
  
  .timeline-dropdown-year {
    color: white;
    font-size: 14px;
    border-bottom: 2px solid white;
    margin-right: 11%;
    margin-left: 34%;
    scroll-snap-align: center;
  }
  </code></pre>
  <p>How can I fix it?</p>
  <p>At the end, you should be able to scroll through this timeline. The active element should always snap to the center and be visually highlighted.</p>