This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can pay attention to ➕ like 👍 pay attention to the public number: Banxia words front end, learn more front-end knowledge! Click me to explore a new world!

preface

Everyone who writes CSS on the front end has to deal with scrolling. Scrolling is what an element does when the contents inside it get too big. The main setup is to use Overflow. Today, when making horizontal scrolling to show the company’s products, I encountered such a problem: when users scroll, stop, positioning may not be in a certain product, display incomplete. Result: The final stop is between two cats, neither of which can see all of it.

Is there a way, when the user scrolls to a stop, to automatically select one of the cats and put it in the middle? At first I did it using JS. Need to listen to the element scroll, and then determine the scroll stop, and then calculate the position, thief trouble. I feel like a fake front end. Since it was a CSS problem, I finally decided to use CSS.

scroll snap

In MDN I found this CSS property that solved my problem: Scroll Snap

Currently, scroller Snap supports scrollsnap-type and scrollsnap-align attributes.

Scroll-snap-type defines the scrolling direction and type of a container.

Scroll-snap-align specifies the alignment of child elements after scrolling stops.

usage

scroll-snap-align

Three attribute values:

start
Copy the code

When scrolling stops, the browser automatically scrolls to the starting position of the child element in the box

end
Copy the code

When scrolling stops, the browser automatically scrolls to the end of the child element in the box

center
Copy the code

When scrolling stops, the browser automatically scrolls to the midpoint of the child element in the box

scroll-snap-type

The specific attribute values can be viewed at developer.mozilla.org/zh-CN/docs/…

I just want to talk about Mandatory and proximity

Mandatory: Easy to understand: When the user stops scrolling, the point of a child element is automatically selected.

Proximity: Only when the user scrolls close to a sufficient value, it selects the point of a child element for rolling. It feels a little hard to understand:

For example: a 200px wide container with multiple child elements that are 200px wide, set the child element scroll-snap-align: center; Container Scroll-snap-type: x proximity;

Take a closer look at the following figure: When I drag the scroll bar, at a certain location, no scroll occurs, indicating that the location has not reached a sufficient value.

I actually tested that when I scroll past the red dot and beyond the border, it will automatically scroll. But the area at the arrow does not scroll.In this case, the thresholdThe red border is about 150px.

Complete the case

Define the container and use flex layout to arrange the elements horizontally. Then I define the X-axis scroll. Overscroll behavior-x: contain; The effect of this property is that when the container scrolls the header, it does not cause the browser to scroll.

.container {
    display: flex;
    flex-direction: row;
    height: 200px;
    padding: 1rem;
    width: 200px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

div{
    margin:10px;
    scroll-snap-align: center;
}

img {
    width: 180px;
    max-width: none;
    object-fit: contain;
    border-radius: 1rem;
}
<div class="container">
    <div href="#"><img src="1.jpeg" /></div>
    <div href="#"><img src="2.jpeg" /></div>
    <div href="#"><img src="3.jpeg" /></div>
    <div href="#"><img src="4.jpeg" /></div>
    <div href="#"><img src="5.jpeg" /></div>
    <div href="#"><img src="2.jpeg" /></div>
    <div href="#"><img src="3.jpeg" /></div>
    <div href="#"><img src="4.jpeg" /></div>
</div>
Copy the code

Lucky draw