Elastic Overflow Scrolling

A shopper requested if we might mimic the “rubber band” scrolling habits on many cellular units. I’m positive you understand what I’m speaking about. It’s a habits that already exists and occurs mechanically in most browsers. In iOS Safari, for instance, you’re allowed to scroll past the highest or backside fringe of the viewport by a number of hundred pixels, and letting go snaps the web page again in place.

I had heard of some cases the place somebody would possibly need to stop the bounce from taking place however nobody had requested me to implement it, particularly in a manner that helps units with no contact interface. I used to be truly a bit stunned there isn’t an current CSS property for this. There’s the non-standard -webkit-overflow-scrolling property however that’s for a unique sort of “momentum” scrolling. Nor would I need to depend on a non-standard property that’s not on observe to develop into a part of the specs.

OK, so what if we need to pressure this type of rubber banding in our work? For starters, we’d want some type of factor performing as a container for content material that requires scrolling. From there, we might attain for JavaScript, in fact, however that includes including scroll listeners or a mixture of pointerDown, pointerUp, and pointerMove occasions, to not point out maintaining observe of positions, inertial motion, and many others.

A CSS-only answer could be far more ultimate.

Here’s a container with a number of youngster parts:

<div class=”carousel”>
<div class=”slides”>
<div class=”slide”>1</div>
<div class=”slide”>2</div>
<div class=”slide”>3</div>
<div class=”slide”>4</div>
<div class=”slide”>5</div>
</div>
</div>

Let’s get some baseline types in place, particularly to create a state of affairs the place we’re assured to overflow a mother or father container.

/* Mum or dad container with mounted dimensions for overflow */
.carousel {
width: 200px;
peak: 400px;
overflow-x: hidden;
overflow-y: auto;
}

/* Wrapper for slides, stacked in a column */
.slides {
show: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
peak: fit-content;
}

/* Every slide is the total width of the carousel */
.slide {
width: 100%;
aspect-ratio: 1;
}

Let’s begin by including some vertical margins. In case your container has just one lengthy merchandise, add it to the highest and backside of the kid factor. If the container has a number of youngsters, you’ll need to add margin to the highest of the primary youngster factor and the underside of the final youngster factor.

.carousel > .slides > .slide:first-child {
margin-top: 100px;
}

.carousel > .slides > .slide:last-child {
margin-bottom: 100px;
}

Nice! We will now scroll previous the sides, however we want one thing to snap it again after the consumer lifts their finger or pointer. For this, we’ll want the scroll-snap-type and scroll-snap-align properties

.carousel {
scroll-snap-type: y obligatory;
}

.carousel > .slides > .slide {
scroll-snap-align: begin;
}

.carousel > .slides > .slide:first-child {
margin-top: 100px;
}

.carousel > .slides > .slide:last-child {
scroll-snap-align: finish;
margin-bottom: 100px;
}

Be aware that the identical applies to a horizontally scrolling factor. For that, you’d change issues up in order that margin is utilized to the factor’s left and proper edges as a substitute of its high and backside edges. You’ll additionally need to change the scroll-snap-type property’s worth from y obligatory to x obligatory when you’re at it.

That’s actually it! Right here’s the ultimate demo:

I do know, I do know. This isn’t some Earth-shattering or mind-blowing impact, however it does resolve a really particular state of affairs. And if you end up in that state of affairs, now you might have one thing in your again pocket to make use of.

Further assets

“The within story of the long-lasting ‘rubber band’ impact that launched the iPhone” (Cult of Mac)

“Six issues I learnt about iOS Safari’s rubber band scrolling” (Particular Agent Squeaky)

“Scroll Bouncing On Your Web sites” (Smashing Journal)

Elastic Overflow Scrolling initially printed on CSS-Methods, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.