Ahmad Translator: Front-end tips source: Ishadee

Click “like” to see, wechat search ** [big move the world] **,B station pay attention to [front-end small wisdom] this does not have a big factory background, but has a positive attitude towards people. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

How often have you wished there was a CSS feature that made it easy to create scrollable containers? CSS Scroll Snap can do this. In 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 and tablet devices, we need to design and build components that can be touched. Take the gallery component for example. Instead of hierarchical structures, users can easily swipe left or right to see more images.

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

The basics of rolling containers

To create a scrolling container, here’s the basics

  • useoverflow
  • A method of displaying items next to each other (inline)

Here’s an 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>
Copy the code
.section {
  white-space: nowrap;
  overflow-x: auto;
}
Copy the code

For years, using white-space: Nowrap is a popular CSS solution for forcing elements to remain inline. Now, though, we mostly use Flexbox:

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

This is the basic way to create a scrolling container. However, this is not enough, this is not a usable rolling container.

What’s wrong with rolling containers

The problem is, they don’t offer a great experience compared to swiping. The main benefit of swiping gestures on a touchscreen is that we can scroll horizontally or vertically with one finger.

You actually need to move each item to its own location. This is not sliding, it is a very bad experience, and by using CSS Scroll Snap, we can solve this problem by simply defining snap points, which will make it easier for the user to scroll horizontally or vertically.

Next, let’s look at how to use CSS Scroll Snap.

Overview of CSS Scroll Snap

To use Scroll Snap on a container, its subitems should be displayed inline, using one of the methods I explained above. I chose 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>
Copy the code
.section {
  display: flex;
  overflow-x: auto;
}
Copy the code

With that, we need to add two more properties for Scroll Snap to work. Where should we add them?

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

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

.section__item {
  scroll-snap-align: start;
}
Copy the code

Here you may be wondering what x Mandatory and start are for. Don’t worry, this is the core of this article and will be covered in depth below.

At this moment, I’m really excited about CSS Scroll Snap, which makes scrolling more natural. Now, let’s dig into the Scroll Snap property.

Scroll Snap Type

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

Roll the axis of the container

The axis of a scroll container indicates the direction of scroll, which can be horizontal or vertical, with an X value indicating horizontal scroll and a Y value indicating vertical scroll.

/* level */.section {display: flex; overflow-x: auto; scroll-snap-type: x; } /* vertical */.section {height: 250px; overflow-y: auto; scroll-snap-type: y; }Copy the code

Scroll Snap container rigor

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

Mandatory: If it is not currently rolled, the visual view of the rolled container will be static at the temporary point. It means that when the rolling action ends, if possible, it will temporarily be at that point. If content is added, moved, removed, or resized, the scroll offset is adjusted to remain stationary at the temporary point.

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

In the figure below, each time the user scrolls to the right, the browser captures the item at the beginning of the container.

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

.section__item {
  scroll-snap-align: start;
}
Copy the code

Try scrolling to the right in the demonstration below. If you’re using a phone or tablet, move the scroll bar to the right or use touch. You should get a sense of how each item is fetched from the beginning of its container.

IO/Shadeed /pen…

However, if the value is proximity, the browser will do the work, and it may adsorb to the defined point (in our example, start). Notice that proximity is the default, but let’s declare it here for clarity.

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

Scroll Snapping Alignment

The children of the scroll container need an alignment point to which they can align. We can use start, center or end.

To make things easier to understand, here’s how it works.

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

Rolling containerstart

Subitems will be adsorbed to the beginning of their horizontal rolling container.

Rolling containercenter

Subitems will be adsorbed to the center of their rolling container.

Rolling containerend

Child items are aligned to the end of their scroll container.

Using insensitive – Snap – Stop

Sometimes, we might need a way to prevent users from accidentally skipping important items while scrolling. If the user scrolls too fast, it is possible to skip items.

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

Moving too fast may skip three or four items, as follows:

The default value of scroll-snap-stop is normal. To force scroll-capture to every possible point, always should be used.

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

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:

IO/Shadeed /pen…

Scroll Snap Padding

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

The same goes for straight rolling. See the following example:

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

Scroll Snap Margin

Margin Sets the margin between the children of the scroll container. When you add margins to an element, the scroll is aligned according to the margins. See below:

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

CSS Scroll Snap case

Image list

A good use case for Scroll Snap is image lists, which 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;
}
Copy the code

Notice that I’m using x as the scroll snap-type value.

IO /shadeed/pen…

Friend list

Another good use case for scrolling capture is friend lists. 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;
}
Copy the code

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

Head the list

For this use case, I’m interested in using center as the scroll-snap-align value.

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

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

This is useful in a list of roles where roles are important in the middle of a scrolling container

IO/Shadeed /pen…

Full screen display

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

<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>
Copy the code
main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

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

Block and inline

It is worth mentioning that for scrollsnap-type, inline and block logical values can be used. See the following example

main {
  scroll-snap-type: inline mandatory;
}
Copy the code

readability

If the CSS Scroll Snap is used, ensure accessibility. This is a bad use of scroll alignment that prevents the user from scrolling freely to read the content.

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

h2 {
  scroll-snap-align: start;
}
Copy the code

Please do not do this.

conclusion

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

I’m Wisdom, and I’ll see you next time!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishade.com/article/css…

communication

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.