CSS Scroll Snap can achieve scroll adsorption effect by setting the scroll-snap attributes of containers and sub-elements. 1. The container needs to define scroll-snap-type, specify the scroll direction (x/y) and adsorption type (mandatory/proximity); 2. The child elements need to set scroll-snap-align, define the alignment (start/end/center); 3. It is necessary to ensure that the container has overflow scrolling and the child elements are clear in size; 4. It is recommended to use scroll-behavior: smooth to achieve smooth scrolling; 5. Pay attention to avoid direct use on the body, and consider mobile compatibility and scroll-padding offset adjustment, and ultimately, full-screen scrolling or horizontal card carousels can be achieved without JavaScript.

CSS Scroll Snap is a very practical function that allows pages or containers to "suck" to specific element positions when scrolling. It is often used in full-screen scrolling, carousel diagrams, horizontal sliding cards and other scenarios. It does not require JavaScript to achieve smooth scrolling alignment. Here is a simple and easy-to-understand CSS Scroll Snap tutorial that will help you master its use from scratch.

1. What is Scroll Snap?

Scroll Snap is a mechanism provided by CSS. By setting the scroll-snap-* attributes of containers and child elements, it controls the scroll container to automatically "align" a child element to a specific position in the viewport when the scrolling stops.

Main uses:

• Full screen scrolling page
• Sliding horizontally pictures/cards
• Paginated content display

2. Basic syntax and key attributes

To achieve rolling adsorption, two parts need to be set: the rolling container and the child element (adsorption point) .

1. Container settings: scroll-snap-type

 .container {
  scroll-snap-type: axis mandatory | proximity;
}

• axis : defines the scrolling direction
  • x : horizontal scrolling
  • y : vertical scrolling
• mandatory : Must be adsorbed to a certain point (common)
• proximity : It can be adsorbed when approaching a certain point, but not forced (less used)

It is recommended to use mandatory to experience the effect closer to the "pagination" effect.

2. Child element settings: scroll-snap-align

 .item {
  scroll-snap-align: start | end | center;
}

Define how child elements align with container edges:

• start : The starting edge of the element is aligned with the container's starting edge
• end : end edge alignment
• center : center aligned

For example: When scrolling vertically, start means that the top of the element is aligned with the top of the container.

3. Practical example: Full screen vertical scrolling

Achieve the effect of automatically "ceiling" to the next full-screen page every time you scroll.

HTML Structure

 <div class="container">
  <section class="slide">Slide 1</section>
  <section class="slide">Slide 2</section>
  <section class="slide">Slide 3</section>
</div>

CSS Style

 html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth; /* Optional: smooth scroll*/
}

.slide {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  scroll-snap-align: start; /* Top alignment when scrolling*/
}

/* Color distinction*/
.slide:nth-child(1) { background: #ffcccc; }
.slide:nth-child(2) { background: #ccffcc; }
.slide:nth-child(3) { background: #ccccff; }

Effect description :

• Each .slide height is viewport height (100vh)
• When scrolling, the browser automatically aligns the top of each slide to the top of the container
• Use scroll-behavior: smooth to make scrolling smoother (optional)

4. Horizontal rolling card (horizontal adsorption)

Commonly used for mobile recommended cards, picture carousels, etc.

HTML

 <div class="carousel">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

CSS

 .carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
  scroll-behavior: smooth;
}

.card {
  flex: 0 0 80%; /* Each card accounts for 80% width, leave some space to see the next one*/
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: #e0e0e0;
  border-radius: 8px;
  scroll-snap-align: start;
}

Skill :

• flex: 0 0 80% will not stretch the card automatically
• scroll-snap-align: start ensures that the new card starts to align from the left after each scrolling
• Enhance interaction by adding the "Previous/Next" button via JS

5. Frequently Asked Questions and Precautions

• Container scrolling must be set : make sure the container has overflow: scroll or overflow-x/y: scroll
• The size of the sub-element must be clear : otherwise it will not be properly adsorbed
• scroll-snap-align: center suitable for center display of carousel images
• On mobile, Safari and Chrome support is good, but the old version may have problems (Can I use can be found)
• Avoid using directly on body , it is recommended to use an internal container

6. Advanced skills (optional)

Add scrollbar (custom or native)

 .carousel {
  -webkit-overflow-scrolling: touch; /* iOS Smooth scrolling*/
}

Adjust alignment offset using scroll-padding

 .container {
  scroll-padding-top: 60px; /* If there is a fixed navigation bar, avoid content being blocked*/
}

Basically that's it. CSS Scroll Snap is not complicated, but it is easy to ignore details (such as forgetting to set overflow or scroll-snap-align ). As long as the structure is clear, you can create a professional-level scrolling experience in just a few steps.

The above is the detailed content of CSS scroll-snap tutorial. For more information, please follow other related articles on the PHP Chinese website!