Elastischer Überlauf -Scrollen

Viele mobile Geräte verfügen über einen gummi-ähnlichen Scrolling-Effekt, sodass Benutzer eine Entfernung über den Rand des Ansichtsfensters hinaus scrollen können, und die Seite erholt sich nach dem Loslassen in ihre ursprüngliche Position. Dieser Effekt wird in den meisten Browsern wie iOS Safari automatisch implementiert. Es ist jedoch nicht einfach, diesen Scrolling-Effekt des "Gummibandes" zu erreichen und mit Nicht-Touch-Geräten kompatibel zu sein. Es gibt keine direkten Eigenschaften in CSS, um diesen Effekt zu kontrollieren, und obwohl es nicht standardmäßige -webkit-overflow-scrolling Eigenschaften gibt, wird es für unterschiedliche Impuls-Scrollen verwendet.

Wenn Sie diesen Gummiband -Effekt erzwingen müssen, müssen Sie normalerweise JavaScript verwenden, um Scroll -Hörer hinzuzufügen oder pointerDown, pointerUp und pointerMove Ereignisse zu verwenden und Position und Trägheitsbewegung usw. zu verfolgen, usw. Aber das ist komplizierter.

Idealerweise möchten wir eine reine CSS -Lösung verwenden.

Betrachten Sie einen Behälter mit mehreren untergeordneten Elementen:

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

Stellen Sie zunächst einige grundlegende Stile fest, um sicherzustellen, dass der übergeordnete Container überläuft:

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

Der Schlüssel besteht darin, den Kinderelementen vertikale Ränder hinzuzufügen. Wenn der Container nur ein langes Element hat, fügen Sie die Ränder oben und unten in diesem Element hinzu.

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

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

Auf diese Weise können wir über den Rand hinaus scrollen. Um einen Rückpralleffekt zu erzielen, müssen wir

und scroll-snap-type Eigenschaften: scroll-snap-align verwenden:

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

für horizontale Scrollingelemente anwenden Sie einfach den Rand auf die linken und rechten Kanten des Elements und ändern Sie den Wert des scroll-snap-type -attributs von y mandatory auf x mandatory.

das ist alles! Dies ist eine einfache und effektive reine CSS -Lösung.

Verwandte Ressourcen:

• "Die innere Geschichte des ikonischen" Gummiband "-Effekts, der das iPhone auf den Markt gebracht hat" (Kult von Mac)
• "Sechs Dinge, die ich über iOS Safari's Gummiband -Scrollen lerne" (Spezialagent quietschend)
• "Scrollen auf Ihren Websites" (Smashing Magazine)

Das obige ist der detaillierte Inhalt vonElastischer Überlauf -Scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!