Schedule - Horizontal Sticky scrolling

[driezie]

Als ik scroll van links naar rechts en ik heb bijvoorbeeld een programma die een hele dag duurt krijg ik een witte vlak. Hierbij wil ik ervoor zorgen dat je altijd de tijd en naam van het programma blijft zien.

Wat het nu is

Alleen heb ik hierbij 2 opties.

Optie 1

https://github.com/user-attachments/assets/b3b95e0a-c5c1-41c1-b241-f9ffdf7c878f

Optie 2

https://github.com/user-attachments/assets/f49f768d-0b33-4ae1-95fa-7469f88b770b

[driezie]

Ik heb overwogen om de eerste optie te gebruiken, maar uiteindelijk gekozen voor de tweede. Dit omdat bij lange teksten de tijd minder goed zichtbaar zou zijn.

Bij deze oplossing heb ik de position: sticky-eigenschap toegepast op de .events en h2 class.

Daarnaast heb ik aanpassingen gedaan voor reduced motion. In dit geval werkt de position: sticky niet. Ook werkt de gap van de schedule niet meer. Ik ben nog aan het onderzoeken waarom dit gebeurt. Voor nu heb ik tijdelijke aanpassingen gemaakt: er is een border van 2 pixels tussen de items geplaatst zonder border-radius, zodat het één doorlopende lijn lijkt, vergelijkbaar met de tv-gids van Ziggo.

Daarnaast heb ik de tijdlijn verwijderd, omdat deze constant beweegt. Dit kan mogelijk irritatie of motion sickness veroorzaken.