Scroll Containers
Create scrolling containers using the scroll snap features from Tailwind.
Demo
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.