Pengguliran yang fleksibel

Seorang pelanggan bertanya kepada saya apakah kami dapat menyimulasikan perilaku pengguliran “karet” di beberapa perangkat seluler. Saya yakin Anda tahu apa yang saya bicarakan. Ini adalah perilaku yang sudah ada dan terjadi secara otomatis di sebagian besar browser. Di iOS Safari, misalnya, Anda diizinkan untuk menggulir melampaui tepi atas atau bawah area pandang beberapa ratus piksel, dan melepaskannya akan mengembalikan halaman ke tempatnya.

Saya pernah mendengar beberapa kasus di mana seseorang mungkin ingin mencegah pentalan, namun tidak ada yang meminta saya menerapkannya, terutama dengan cara yang mendukung perangkat tanpa antarmuka sentuh. Saya sebenarnya terkejut karena tidak ada properti CSS untuk ini. Ada properti non-standar -webkit-overflow-scrolling properti tetapi ini untuk jenis pengguliran “momentum” yang berbeda. Saya juga tidak ingin bergantung pada fitur non-standar yang tidak menjadi bagian dari spesifikasi.

Nah, bagaimana jika kita ingin memaksakan tumpang tindih seperti ini ke dalam pekerjaan kita? Pertama, kita memerlukan beberapa jenis elemen yang bertindak sebagai wadah untuk konten yang memerlukan pengguliran. Dari sana, tentu saja kita dapat beralih ke JavaScript, tetapi ini melibatkan penambahan pendengar pass-through atau kombinasi keduanya pointerDown, pointerUpDan pointerMove Peristiwa, belum lagi mengikuti posisi, gerakan inersia, dll.

Solusi khusus CSS akan ideal.

Berikut adalah wadah yang berisi beberapa sub-item:

<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>

Mari kita terapkan beberapa gaya garis dasar, khususnya untuk menciptakan situasi di mana kita dijamin akan mengganti container induk.

/* Parent container with fixed dimensions for overflow */
.carousel {
  width: 200px;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

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

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

Mari kita mulai dengan menambahkan beberapa margin vertikal. Jika wadah hanya berisi satu elemen panjang, tambahkan elemen tersebut ke bagian atas dan bawah elemen turunan. Jika penampung berisi beberapa item turunan, Anda perlu menambahkannya margin Ke atas sub-item pertama dan ke bawah sub-item terakhir.

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

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

luar biasa! Sekarang kita dapat menggulir tepinya, tetapi kita memerlukan sesuatu untuk mengembalikannya ke tempatnya setelah pengguna mengangkat jari atau kursornya. Untuk ini, kita perlu scroll-snap-type Dan scroll-snap-align Properti

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

Perhatikan bahwa hal yang sama berlaku untuk <>Secara horizontal Menggulir Barang. Jadi, Anda harus mengubah banyak hal agar margin Ini diterapkan pada tepi kiri dan kanan elemen, bukan pada tepi atas dan bawah. Anda juga perlu berubah scroll-snap-type Nilai properti dari y mandatory ke x mandatory Saat Anda melakukannya.

Hanya itu saja! Inilah demo terakhirnya:

Saya tahu, saya tahu. Ini bukan efek yang menakjubkan atau menakjubkan, tetapi ini memecahkan situasi yang sangat spesifik. Dan jika Anda berada dalam situasi ini, sekarang Anda memiliki sesuatu di saku belakang Anda yang dapat Anda gunakan.

Sumber daya tambahan

• “Kisah mendalam tentang efek 'karet gelang' terkenal yang meluncurkan iPhone” (Cult of Mac)
• “Enam Hal yang Saya Pelajari Tentang Pengguliran Karet di Safari di iOS” (Agen Khusus Squeaky)
• “Bounce Scrolling di Situs Web Anda” (Majalah Smashing)

Elastic Overflow Scrolling awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.