Skip to main content

Scroll Snap — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Scroll Snap lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Smooth the scrolling

    easy10 min

    Make scrolling inside #wrap animate smoothly.

  2. 2

    Snap vertically

    easy10 min

    Make #wrap snap on the y axis, mandatorily.

  3. 3

    Align the snap targets

    easy10 min

    Snap each #box to the centre of the container.

  4. 4

    Pad the snap area

    easy10 min

    Give #wrap 20px of scroll padding.

  5. 5

    Force one item at a time

    medium10 min

    Snap must stop at every item, and scrolling must not chain to the page.

Find the bug(5)

  1. 1

    Fix the invalid value

    easy8 min

    The value is smooth.

  2. 2

    Fix the loose snapping

    easy8 min

    Proximity only snaps when the scroll ends nearby; this needs mandatory.

  3. 3

    Fix the missing axis

    easy8 min

    scroll-snap-type needs an axis before the strictness.

  4. 4

    Fix the alignment on the container

    easy8 min

    scroll-snap-align belongs on the snap targets.

  5. 5

    Fix the padding property

    easy8 min

    The scroll area is padded with scroll-padding.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace