Elastic Overflow Scrolling

Many mobile devices have a rubber band-like scrolling effect, allowing users to scroll a distance beyond the edge of the viewport, and the page will rebound to its original position after letting go. This effect is automatically implemented in most browsers, such as iOS Safari. However, achieving this "rubber band" scrolling effect and being compatible with non-touch devices is not easy. There are no direct properties in CSS to control this effect, and although there are non-standard -webkit-overflow-scrolling properties, it is used for different momentum scrolling.

If you need to force this rubber band effect, you usually need to use JavaScript to add scroll listeners or use pointerDown, pointerUp and pointerMove events, and track position and inertial motion, etc. But this is more complicated.

Ideally, we would like to use a pure CSS solution.

Consider a container with multiple child elements:

<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

First, set some basic styles to ensure that the parent container overflows:

/* 父容器，设置固定尺寸以产生溢出 */
.carousel {
  width: 200px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 子元素容器，垂直排列 */
.slides {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: fit-content;
}

/* 每个子元素占据容器全宽 */
.slide {
  width: 100%;
  aspect-ratio: 1;
}

The key is to add vertical margins to the child elements. If the container has only one long element, add margins at the top and bottom of that element; if there are multiple child elements, add margins at the top and bottom of the first element:

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

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

This way, we can scroll beyond the edge. In order to achieve a rebound effect, we need to use scroll-snap-type and scroll-snap-align properties:

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

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

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

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

For horizontal scrolling elements, simply apply the margin to the left and right edges of the element and change the value of the scroll-snap-type attribute from y mandatory to x mandatory.

This is all! This is a simple and effective pure CSS solution.

Related resources:

• "The inside story of the iconic ‘rubber band’ effect that launched the iPhone" (Cult of Mac)
• "Six things I learn about iOS Safari’s rubber band scrolling" (Special Agent Squeaky)
• "Scroll Bouncing On Your Websites" (Smashing Magazine)

The above is the detailed content of Elastic Overflow Scrolling. For more information, please follow other related articles on the PHP Chinese website!