Menatal limpahan elastik

Banyak peranti mudah alih mempunyai kesan menatal seperti band getah, yang membolehkan pengguna menatal jarak di luar tepi viewport, dan halaman akan pulih ke kedudukan asalnya selepas melepaskannya. Kesan ini dilaksanakan secara automatik dalam kebanyakan pelayar, seperti safari iOS. Walau bagaimanapun, mencapai kesan "band getah" ini dan bersesuaian dengan peranti tidak sentuh tidak mudah. Tidak ada sifat langsung dalam CSS untuk mengawal kesan ini, dan walaupun terdapat sifat-sifat yang tidak standard, ia digunakan untuk menatal momentum yang berbeza.

-webkit-overflow-scrolling Jika anda perlu memaksa kesan band getah ini, anda biasanya perlu menggunakan JavaScript untuk menambah pendengar tatal atau menggunakan

,

dan pointerDown peristiwa, dan kedudukan trek dan gerakan inersia, dan lain -lain. Tetapi ini lebih rumit. pointerUp pointerMove

Idealnya, kami ingin menggunakan penyelesaian CSS tulen.

Pertimbangkan bekas dengan pelbagai elemen kanak -kanak:

Pertama, tetapkan beberapa gaya asas untuk memastikan bahawa bekas induk melimpah:

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

Kuncinya adalah untuk menambah margin menegak kepada unsur -unsur kanak -kanak. Jika bekas mempunyai satu elemen panjang, tambahkan margin di bahagian atas dan bawah elemen itu;

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

Dengan cara ini, kita boleh menatal di luar tepi. Untuk mencapai kesan pemulihan, kita perlu menggunakan sifat

dan

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

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

:

scroll-snap-type scroll-snap-align Untuk elemen menatal mendatar, hanya gunakan margin ke tepi kiri dan kanan elemen dan tukar nilai atribut

dari

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

ke

. scroll-snap-type y mandatory ini semua! Ini adalah penyelesaian CSS tulen yang mudah dan berkesan. x mandatory

Sumber yang berkaitan:

"Kisah Dalam Kesan Band 'Rubber' Ikon yang melancarkan iPhone" (Cult of Mac)

"Enam perkara yang saya pelajari mengenai Band Rubber Band Safari" (Agen Khas Squeaky)
"tatal melantun di laman web anda" (Majalah Smashing)

Atas ialah kandungan terperinci Menatal limpahan elastik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!