CodeBlanks Logo Icon CodeBlanks
Login Register

Scroll-snap

CSS course · Expert · Lesson 35/53

Learn scroll-snap-type and scroll-snap-align properties.

What is scroll-snap-type?

The scroll-snap-type property decides how items align after a scroll in a scroll container. It takes two values: axis and strictness. The axis can be x, y, or both; the strictness is mandatory or proximity.

For example, scroll-snap-type: y mandatory forces vertical scrolls to always settle on a snap point. This is handy for slideshows or galleries.

Forcing stops with scroll-snap-stop

Sometimes a fast scroll makes the user skip multiple snap points. The scroll-snap-stop: always declaration forces a stop at each snap point; no skipping. The default value is normal.

For example, in a presentation where each slide must be seen, you add scroll-snap-stop: always to each slide. Even a fast scroll stops at the next slide.

Exercise Vertical scroll snapping

Write two blocks. First, a CSS block for the .scroller selector; this block must contain the scroll-snap-type: y mandatory declaration. Second, a CSS block for the .scroller > section selector; this block must contain the scroll-snap-align: start declaration.

Show example solution 
/* vertical scroll snapping */
.scroller {
  scroll-snap-type: y mandatory;
}
.scroller > section {
  scroll-snap-align: start;
}

Test yourself

  1. What is the difference between mandatory and proximity?

    • mandatory works only on the x axis, proximity only on the y axis
    • mandatory always snaps to the point, proximity snaps only when close
    • mandatory scrolls faster, proximity slower
    • mandatory is for desktop, proximity is for mobile only
    Show answer

    mandatory always snaps to the point, proximity snaps only when close — Correct. mandatory always snaps; proximity snaps only when close.

  2. Write the alignment position

    /* gallery item alignment */
.gallery > * {
  scroll-snap-align: ____;
}
    Show answer 
    /* gallery item alignment */
.gallery > * {
  scroll-snap-align: center;
}

  3. Match each property to its meaning

    scroll-snap-type
    Sets axis and strictness
    scroll-snap-align
    Item alignment to snap point
    scroll-snap-stop
    Forces a stop at each snap point
    scroll-padding
    Adds padding for snap points

All lessons in Expert

1 CSS architecture

  1. BEM methodology
  2. CSS organization
  3. Specificity management
  4. Cascade layers
  5. Modular CSS
  6. Summary - Component library

2 CSS performance

  1. What is CSS performance?
  2. Selector performance
  3. Layout and paint
  4. Will-change
  5. Contain
  6. Summary - Fast card list

3 CSS Houdini

  1. What is Houdini?
  2. Paint API
  3. Layout API
  4. Properties and values API
  5. Typed OM
  6. Summary - Custom background pattern

4 Advanced container queries

  1. Container-type in depth
  2. Container-name
  3. Container query units
  4. Container style
  5. Container components
  6. Summary - Responsive widget system

5 View transitions

  1. What are view transitions?
  2. ::view-transition
  3. View-transition-name
  4. Transition animations
  5. Cross-document transitions
  6. Summary - Transitional gallery

6 Scroll-driven animations

  1. Scroll-driven animations
  2. Scroll function
  3. View function
  4. Timeline attachment
  5. Scroll-snap
  6. Summary - Scroll story

7 Anchor positioning

  1. What is anchor positioning?
  2. Anchor-name
  3. Position-anchor
  4. Anchor() function
  5. Position-try
  6. Summary - Dropdown panel

8 CSS nesting

  1. What is CSS nesting?
  2. & nesting selector
  3. Nested media
  4. Nested pseudo
  5. Nested compound
  6. Summary - Component style

9 Expert final

  1. Challenge - BEM architecture
  2. Challenge - Container system
  3. Challenge - View transitions
  4. Challenge - Anchor panel
  5. Challenge - Expert capstone