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.

Practice

1. What does the Tailwind class snap-x do in a scroll container?

easy

A. It enables horizontal scroll snapping inside the container.

B. It enables vertical scroll snapping inside the container.

C. It disables scroll snapping inside the container.

D. It sets the scroll snapping to mandatory on all sides.

Solution

1. Step 1: Understand the snap-x class

   The snap-x class in Tailwind sets scroll-snap-type: x mandatory; which means horizontal snapping.

2. Step 2: Compare with other options

   Vertical snapping uses snap-y, disabling snapping uses snap-none, and mandatory snapping on all sides is not a valid Tailwind class.

3. Final Answer:

   It enables horizontal scroll snapping inside the container. -> Option A

4. Quick Check:

   snap-x = horizontal scroll snap [OK]

Hint: Remember x means horizontal, y means vertical scroll snap [OK]

Common Mistakes:

• Confusing snap-x with vertical snapping
• Thinking snap-x disables snapping
• Assuming snap-x applies to all directions

2. Which Tailwind class correctly applies scroll snapping alignment to a child element to start at the container's snap point?

easy

A. snap-end

B. snap-center

C. snap-start

D. snap-none

Solution

1. Step 1: Identify scroll snap alignment classes

   Tailwind uses snap-start, snap-center, and snap-end to align child elements at the start, center, or end of the snap point.

2. Step 2: Match the requirement

   The question asks for alignment at the container's snap point start, so snap-start is correct.

3. Final Answer:

   snap-start -> Option C

4. Quick Check:

   snap-start = align at snap point start [OK]

Hint: snap-start aligns child at container's snap start [OK]

Common Mistakes:

• Choosing snap-center instead of snap-start
• Using snap-none which disables snapping
• Confusing snap-end with snap-start

3. Given this HTML snippet with Tailwind classes:

<div class="overflow-x-auto snap-x">
  <div class="snap-center w-64 h-40 bg-blue-400">Item 1</div>
  <div class="snap-center w-64 h-40 bg-green-400">Item 2</div>
  <div class="snap-center w-64 h-40 bg-red-400">Item 3</div>
</div>

What will happen when you scroll horizontally inside the container?

medium

A. Scrolling will not snap; it scrolls freely.

B. Scrolling will snap horizontally to center each item smoothly.

C. Scrolling will snap vertically to center each item.

D. Scrolling will snap horizontally but align items to start.

Solution

1. Step 1: Analyze container classes

   The container has overflow-x-auto (horizontal scroll), snap-x (horizontal mandatory snap).

2. Step 2: Analyze child classes

   Each child has snap-center, so snapping aligns each item centered in the viewport.

3. Final Answer:

   Scrolling will snap horizontally to center each item smoothly. -> Option B

4. Quick Check:

   snap-x + snap-center = horizontal center snap [OK]

Hint: snap-x + snap-center means horizontal center snapping [OK]

Common Mistakes:

• Thinking snap-x snaps vertically
• Ignoring snap-mandatory effect
• Assuming snap-start alignment instead of center

4. You wrote this Tailwind code but scroll snapping does not work:

<div class="overflow-y-auto snap-x">
  <div class="snap-start h-40 bg-yellow-300">Item A</div>
  <div class="snap-start h-40 bg-yellow-500">Item B</div>
</div>

What is the main issue preventing scroll snapping?

medium

A. Missing width on child elements.

B. Not setting scroll-padding on the container.

C. Using snap-start instead of snap-center.

D. Using snap-x with vertical scrolling (overflow-y-auto).

Solution

1. Step 1: Check scroll direction and snap type

   The container scrolls vertically (overflow-y-auto) but uses snap-x which is for horizontal snapping.

2. Step 2: Understand snapping mismatch

   Scroll snapping only works if the snap axis matches the scroll direction. Here, vertical scroll with horizontal snap causes no snapping.

3. Final Answer:

   Using snap-x with vertical scrolling (overflow-y-auto). -> Option D

4. Quick Check:

   Scroll axis must match snap axis [OK]

Hint: Match scroll direction with snap-x or snap-y [OK]

Common Mistakes:

• Mixing horizontal snap with vertical scroll
• Ignoring child element sizing
• Thinking snap-start vs snap-center affects snapping presence

5. You want a vertical scroll container that snaps to each child element's start. Which Tailwind classes should you use on the container and children?

hard

A. Container: overflow-y-auto snap-y snap-mandatory, Children: snap-start

B. Container: overflow-y-auto snap-x snap-mandatory, Children: snap-center

C. Container: overflow-x-auto snap-y snap-proximity, Children: snap-end

D. Container: overflow-y-auto snap-y, Children: snap-start

Solution

1. Step 1: Identify scroll direction and snapping type

   Vertical scroll requires overflow-y-auto and vertical snap with snap-y.

2. Step 2: Choose snapping behavior

   Tailwind uses mandatory snapping, so snap-y snap-mandatory is correct.

3. Step 3: Set child alignment

   Children aligned at the start use snap-start.

4. Final Answer:

   Container: overflow-y-auto snap-y snap-mandatory, Children: snap-start -> Option A

5. Quick Check:

   Vertical + start alignment = Container: overflow-y-auto snap-y snap-mandatory, Children: snap-start [OK]

Hint: snap-y enables vertical snapping to snap points [OK]

Common Mistakes:

• Using snap-x with vertical scroll
• Confusing snap-mandatory with snap-proximity
• Misaligning children with snap-center instead of snap-start