Tailwind

Scroll Containers

Create scrolling containers using the scroll snap features from Tailwind.

Page Source

Demo

1
2
3
4
5
6
7
8

Scroll left or right to demo snapping.

Tailwind References

Use the following links to learn more about Tailwind's scroll behavior and snap features.

Feature Description
scroll-behavior Controls the scroll behavior of an element.
scroll-margin Controls the scroll offset around items in a snap container.
scroll-padding Controls an element's scroll offset within a snap container.
scroll-snap-align Controls the scroll snap alignment of an element.
scroll-snap-stop Controls whether you can skip past possible snap positions.
scroll-snap-type Controls how strictly snap points are enforced in a snap container.

Carousels

Using Scroll Containers, we can create a fully functional carousel, complete with thumbnail selection. This introduces javascript logic to control the carousel navigation on demand.

vjUokUWbFOs1aJuPtQJX_IJp6O3FFRdEII3C_eojFVQYs0fXOuyTH1Mz_X0PxmBuIQ

Multi-Column