Scroll-snap containers in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding scroll-snap-type behavior

Which Tailwind CSS class correctly sets a horizontal scroll container to snap to each child element when scrolling?

A snap-y snap-mandatory

B snap-y snap-proximity

C snap-x snap-none

D snap-x snap-mandatory

💡 Hint

Think about the axis direction and how strictly snapping should happen.

The snap-x class sets horizontal snapping, and snap-mandatory forces the scroll to snap to child elements strictly. Other options either use vertical snapping (snap-y) or do not enforce snapping (snap-none).

📝 Syntax

intermediate

Fix the scroll-snap child class

Which option correctly applies the Tailwind class to make a child element snap to the start of the scroll container?

A snap-begin

B snap-start

C snap-top

D snap-left

💡 Hint

Tailwind uses specific keywords for snap alignment, not directional words like 'top' or 'left'.

snap-start is the correct Tailwind class to align the child element to the start edge of the scroll container. Other options are invalid Tailwind classes.

❓ rendering

advanced

Visual effect of scroll-snap-align classes

Given a horizontal scroll container with snap-x snap-mandatory, what visual effect will a child element with snap-center have when scrolling?

A The child snaps so its center aligns with the container's center when scrolling stops.

B The child snaps so its left edge aligns with the container's left edge.

C The child snaps so its right edge aligns with the container's right edge.

D The child does not snap and scrolls freely.

💡 Hint

Think about what 'center' means in scroll snapping.

snap-center aligns the center of the child element with the center of the scroll container when snapping occurs. Other options describe different alignments or no snapping.

❓ selector

advanced

Choosing the correct scroll-snap-stop class

Which Tailwind CSS class ensures that a scroll snap point cannot be skipped during fast scrolling?

A snap-stop-never

B snap-stop-mandatory

C snap-stop-always

D snap-stop-proximity

💡 Hint

Look for the class that forces the scroll to always stop at snap points.

snap-stop-always forces the scroll to stop at the snap point and not skip it. Other options are invalid or do not exist in Tailwind.

❓ accessibility

expert

Improving accessibility for scroll-snap containers

Which practice best improves keyboard accessibility for a scroll-snap container with horizontal overflow?

A Add <code>tabindex="0"</code> to the container and ensure arrow keys scroll the container horizontally.

B Disable keyboard focus on the container to prevent confusion.

C Use only mouse events for scrolling and hide scrollbars.

D Add <code>aria-hidden="true"</code> to the container to reduce screen reader noise.

💡 Hint

Think about how keyboard users can interact with scrollable content.

Adding tabindex="0" makes the container focusable by keyboard. Handling arrow keys to scroll horizontally allows keyboard users to navigate the content. Other options reduce accessibility or hide content from assistive technologies.