Scroll Spy
This scroll spy component uses scroll markers as in-page links to a section of content. Scroll markers are aware and stateful to the section they were generated with, and we use this to highlight the titles.
Check the mobile layout, it looks a lot like tabs. It's also very much a vertical variant on the TV Series demo, but it doesn't start you at your current episode.
A vertical scroller
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Markers for sections
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Nice long section to show the spy stays highlighted for the entirety of it's section.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Grid to lay it all out
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsam, animi, nemo eaque at dolorum ipsum cum velit error iste magni. Ipsam commodi soluta corporis corrupti error eum reiciendis sunt!