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.

1620562303747-ba21ca6f15301572826246393-e42b63b4ac821620074506951-33a51f7f454a1601325979086-d54da2c7419c1597077962467-be16edcc6a431510111652602-195fc654aa83

Multi-Column