Make scrolling inside #wrap animate smoothly.
Acceptance criteria
- 1.Make scrolling inside #wrap animate smoothly.
CSS Tutorial · CSS Effects
These 10 tasks go with the Scroll Snap chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Create deliberate scroll destinations, offsets, and snapping without trapping users. You will build anchor offsets, smooth scrolling, horizontal snap galleries, proximity and mandatory snapping, and a reduced-motion fallback.” .
1.Smooth the scrollingexercise · easy · 10 min
Make scrolling inside #wrap animate smoothly.
Passes when: Make scrolling inside #wrap animate smoothly.
2.Snap verticallyexercise · easy · 10 min · practice plan
Make #wrap snap on the y axis, mandatorily.
Passes when: Make #wrap snap on the y axis, mandatorily.
3.Align the snap targetsexercise · easy · 10 min · practice plan
Snap each #box to the centre of the container.
Passes when: Snap each #box to the centre of the container.
4.Pad the snap areaexercise · easy · 10 min · practice plan
Give #wrap 20px of scroll padding.
Passes when: Give #wrap 20px of scroll padding.
5.Force one item at a timeexercise · medium · 10 min · practice plan
Snap must stop at every item, and scrolling must not chain to the page.
Passes when: Snap must stop at every item, and scrolling must not chain to the page.
6.Fix the invalid valuebug fix · easy · 8 min
The value is smooth.
Passes when: The value is smooth.
7.Fix the loose snappingbug fix · easy · 8 min · practice plan
Proximity only snaps when the scroll ends nearby; this needs mandatory.
Passes when: Proximity only snaps when the scroll ends nearby; this needs mandatory.
8.Fix the missing axisbug fix · easy · 8 min · practice plan
scroll-snap-type needs an axis before the strictness.
Passes when: scroll-snap-type needs an axis before the strictness.
9.Fix the alignment on the containerbug fix · easy · 8 min · practice plan
scroll-snap-align belongs on the snap targets.
Passes when: scroll-snap-align belongs on the snap targets.
10.Fix the padding propertybug fix · easy · 8 min · practice plan
The scroll area is padded with scroll-padding.
Passes when: The scroll area is padded with scroll-padding.
Between them these tasks cover scroll-behavior, scroll-snap-type and Snap alignment.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.