Use CSS Scroll Snap to optimize scrolling and improve user experience!

Author: Ahmad
Translator: Frontend Xiaozhi
Source: ishadee

There are dreams and dry goods. WeChat search [Moving to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Do you often want to have a CSS feature that can easily create a scrollable container? CSS scroll snap can do this. In the early front-end development, I relied on JS plug-ins to create slider components. Sometimes, we need a simple way to quickly make elements into scrollable containers. Now, thanks to CSSS scroll snap , we can do this simply.

Why use CSS Scroll Snap

With the rise of mobile devices and tablet devices, we need to design and build components that can be touched. Take the gallery component as an example. Users can easily swipe left or right to view more images instead of a hierarchical structure.

According to the CSS specification , providing developers with a well-controlled scrolling experience is one of the main reasons for the CSS scroll snap It enhances the user experience and makes it easier to implement a scrolling experience.

The basics of rolling containers

To create a rolling container, the following is the basic content we need to do

• Use overflow
• A way to display items next to each other (inline)

for example:

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
  <div class="section__item">Item 3</div>
  <div class="section__item">Item 4</div>
  <div class="section__item">Item 5</div>
</div>

.section {
  white-space: nowrap;
  overflow-x: auto;
}

For many years, using white-space: nowrap is a popular CSS solution for forcing elements to stay inline. However, now we basically use Flexbox :

.section {
  display: flex;
  overflow-x: auto;
}

This is the basic method of creating a rolling container. However, this is not enough, this is not a usable scroll container.

What's wrong with the rolling container

The problem is that they do not provide a good experience compared to sliding. The main benefit of swiping gestures on the touch screen is that we can scroll horizontally or vertically with one finger.

In fact, each item needs to be moved to its own location. This is not sliding, it is a very bad experience, by using CSS scroll snap , we can snap points , which will make it easier for users to scroll horizontally or vertically.

Next, let's take a look at how to use CSS scroll snap .

Introduction to CSS Scroll Snap

scroll snap on the container, its sub-items should be displayed inline. This can be achieved by one of the methods I explained above. I choose CSS flexbox:

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
  <div class="section__item">Item 3</div>
  <div class="section__item">Item 4</div>
  <div class="section__item">Item 5</div>
</div>

.section {
  display: flex;
  overflow-x: auto;
}

With this, we need to add two other attributes to make the scroll snap work. Where should we add them?

First, we need to add scroll-snap-type to the scroll container. In our example, it is the .section element. Then, we need to add scrolln-snap-align to the child item (ie .section__item ).

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

Here you may be wondering what the x mandatory and start are for. Don't worry, this is the core of this article, and I will explain it in depth below.

At this moment, I am CSS scroll snap , which makes scrolling more natural. Now, let us delve into the scroll snap properties.

Scroll Snap Type

According to the CSS specification , the scroll-snap-type attribute defines how a snap point in the scroll container is strictly enforced.

The axis of the rolling container

The axis of the scroll container represents the scroll direction, which can be horizontal or vertical. The x represents horizontal scrolling, and y represents vertical scrolling.

/* 水平*/
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}

/* 垂直*/
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}

The strictness of the Scroll Snap container

We can not only define the direction of Scroll Snap, but also how strict it is. This can be achieved by using the scroll-snap-type value of andatory | proximity .

mandatory : If it is not currently being scrolled, the visual view of the scrolling container will remain at a temporary point. It means that when the scrolling action ends, it will temporarily be at that point if possible. If content is added, moved, deleted, or resized, the scroll offset will be adjusted to remain stationary at the temporary point.

mandatory keyword means that the browser must capture every scroll point. Assume that the roll-snap-align has a value of start This means that the scroll must be aligned to the beginning of the scroll container.

In the image below, every time the user scrolls to the right, the browser captures the item to the beginning of the container.

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

Try to scroll to the right in the demo below. If you are using a mobile phone or tablet, you can move the scroll bar to the right or use touch. You should be able to feel how each item is grabbed from the beginning of its container.

Demo address: https://codepen.io/shadeed/pen/RwGaXKB

However, if the value is proximity , the browser will do the job, and it may snap to the defined point (in our example start ). Note that proximity is the default value, but for clarity, we still declare it here.

.section {
  display: flex;
  overflow-x: auto;
  /* proximity is the default value, I added it for clarity reasons */
  scroll-snap-type: x proximity;
}

By the way, I would like to recommend a cloud database MemFire Cloud that is easy to use. As a small application, his free quota is more than enough.

Scroll Snapping Alignment

The child items of the scroll container need an alignment point, and they can be aligned to this point. We can use start , center or end .

To make it easier to understand, here is how it works.

Suppose we have a magnet on the rolling container, which will help us control the catch point. If scroll-snap-type is vertical, the alignment will be vertical. See the picture below:

Rolling container start

The sub-item will snap to the beginning of its horizontal scroll container.

Rolling container center

The sub-item will be snapped to the center of its rolling container.

Rolling container end

The child will be aligned to the end of its scroll container.

Use Scroll-Snap-Stop

Sometimes, we may need a way to prevent users from accidentally skipping some important items when scrolling. If the user scrolls too fast, some items may be skipped.

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

Acting too fast may skip three or four items, as shown below:

scroll-snap-stop The default value is normal , to force the scroll capture every possible point, you should use always .

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

In this way, users can scroll to one capture point at a time, which helps avoid skipping important content. Imagine that each stop point has a stop sign, see the animation below:

Demo address: https://codepen.io/shadeed/pen/JjRbXza

Scroll Snap Padding

scroll-padding sets the scroll margins on all sides, similar to padding property works. In the image below, the left side of the scroll container has an inner margin of 50px As a result, the child element will be captured from the left edge to 50px

The same goes for straight scrolling. See the example below:

.section {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

Scroll Snap Margin

scroll-margin sets the spacing between the children of the scroll container. When adding margins to the element, the scroll will be aligned according to the margins. See the picture below:

.item-2 has scroll-margin-left: 20px . As a result, the scroll container will be aligned to 20px before the item. Note that when the user scrolls to the right again, the .item-3 will snap to the beginning of the scroll container, which means that only elements with margins will be affected.

CSS Scroll Snap use case

Picture list

A good use case for scroll snap is image lists, using scroll snap to provide a better scrolling experience.

.images-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
  gap: 1rem;
  -webkit-overflow-scrolling: touch; /* Important for iOS devices */
}

.images-list img {
  scroll-snap-align: start;
}

Note that I used x as the value of scroll-snap-type

address: 1617206142790c https://codepen.io/shadeed/pen/jOMrxYO

Friends list

Another good use case for scroll capture is a friend list. The following example is taken from Facebook (a real example).

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  scroll-padding: 48px;
  padding-bottom: 32px;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: start;
}

Note the padding-bottom：32px rolling container. The purpose of this is to provide extra space so that box-shadow can be displayed as expected.

Avatar list

For this use case, I am interested in setting center as the value of scroll-snap-align

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: center;
}

This is very useful in a list of roles, the role is very important in the middle of the scrolling container

Demo address: https://codepen.io/shadeed/pen/KKgMJWa

Full screen display

Use scroll snap can also be used for vertical scrolling, full-screen display is a good example.

<main>
  <section class="section section-1"></section>
  <section class="section section-2"></section>
  <section class="section section-3"></section>
  <section class="section section-4"></section>
  <section class="section section-5"></section>
</main>

main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

Block and inline

It is worth mentioning that for scroll-snap-type, the logical values inline and block See example below

main {
  scroll-snap-type: inline mandatory;
}

readability

When using CSS scroll snap, please ensure accessibility. This is a bad use of scroll alignment, which prevents users from scrolling freely to read the content.

.wrapper {
  scroll-snap-type: y mandatory;
}

h2 {
  scroll-snap-align: start;
}

Please don't do this.

Summarize

This is a long article about a new CSS feature I just learned. I hope it is useful to you.

I'm Xiaozhi, see you in the next issue!

---

possible bugs of the 1672061427c17 code after deployment cannot be known in real time. To solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://ishade.com/article/css-scroll-snap/

comminicate

If you have dreams and dry goods, search on [Moving to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.