TIL how to make another kind of carousel

A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann

Horizontal scrolling built on top of native scrolling

  • CSS: horizontal menu, hidden scrollbar; scroll-snap
  • Accessibility: button text visible-hidden
  • JavaScript: throttling, debouncing, requestAnimationFrame; ResizeObserver
  • Usability: overlay scroll buttons, disable clicking
  • UX: keep scroll position when changing pages (in sessionStorage)
  • infinite merry-go-round with CSS order property

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.