Décroquette de débordement élastique

De nombreux appareils mobiles ont un effet de défilement semblable à une bande de caoutchouc, permettant aux utilisateurs de faire défiler une distance au-delà du bord de la fenêtre, et la page rebondira à sa position d'origine après avoir lâché Go. Cet effet est automatiquement mis en œuvre dans la plupart des navigateurs, tels que iOS Safari. Cependant, la réalisation de cet effet de défilement "élastique" et être compatible avec des appareils non touchés n'est pas facile. Il n'y a pas de propriétés directes dans CSS pour contrôler cet effet, et bien qu'il existe des propriétés non standard -webkit-overflow-scrolling, il est utilisé pour différents défilements de momentum.

Si vous avez besoin de forcer cet effet de la bande de caoutchouc, vous devez généralement utiliser JavaScript pour ajouter des écouteurs de défilement ou utiliser pointerDown, pointerUp et pointerMove des événements, et de suivre la position et le mouvement inertiel, etc. Mais c'est plus compliqué.

Idéalement, nous aimerions utiliser une solution CSS pure.

Considérons un conteneur avec plusieurs éléments enfants:

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

Tout d'abord, définissez certains styles de base pour vous assurer que le conteneur parent déborde:

/* 父容器，设置固定尺寸以产生溢出 */
.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;
}

La clé consiste à ajouter des marges verticales aux éléments enfants. Si le conteneur n'a qu'un seul élément, ajoutez des marges en haut et en bas de cet élément;

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

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

De cette façon, nous pouvons faire défiler au-delà du bord. Afin d'obtenir un effet de rebond, nous devons utiliser les propriétés

et scroll-snap-type: scroll-snap-align

.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;
}

Pour les éléments de défilement horizontal, appliquez simplement la marge aux bords gauche et droit de l'élément et modifiez la valeur de l'attribut

de scroll-snap-type à y mandatory. x mandatory

c'est tout! Il s'agit d'une solution CSS pure simple et efficace.

Ressources connexes:

"L'histoire intérieure de l'effet emblématique de" Rubber Band "qui a lancé l'iPhone" (culte de Mac)
"Six choses que j'apprends sur le défilement de la bande de caoutchouc d'iOS Safari" (agent spécial squeaky)
"Faites défiler le rebond sur vos sites Web" (Smashing Magazine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!