Kaydırma-hizalama - CSS Hileleri

Anonim

scroll-snap-align, CSS Scroll Snap Modülünün bir parçasıdır. Kaydırarak yapıştırma, pencere (veya kaydırılabilir bir konteyner) kaydırıldığında görünüm penceresinin konumunu sayfadaki belirli öğelere "kilitlemek" anlamına gelir. Görüntü alanının tepesine yapışan ve sayfayı kaydırmayı durdurmaya zorlayan bir öğenin üstüne bir mıknatıs koymak gibi kaydırarak yapıştırılan bir kapsayıcı düşünün.

scroll-snap-alignkaydırarak yapıştırma kapsayıcısı içinde kaydırarak yapıştırma öğesi için gerekli bir özelliktir. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-typealmanak girişine bakın. scroll-snap-alignBir yakalama noktası karşılaşıldığında hizalanmalıdır bir elemanın parçası tarayıcı anlatır: Meli elemanı ek start, centerya endiçeren ana kabın scroll-snap-typeözelliği?

Bir elemanın o elemanın başlangıcında yerine oturmasını istiyorsanız, ona şöyle bir scroll-snap-aligndeğer verin :

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sözdizimi

scroll-snap-align: ( none | start | end | center )(1,2)

Bu özellik için sırasıyla blok ve satır içi eksenleri temsil eden en fazla 2 değer belirtebilirsiniz. Sadece 1 değer verirseniz, bu değer her iki eksen için kullanılacaktır.

Değerler

scroll-snap-align aşağıdaki değerleri kabul eder:

  • none öğede kaydırarak yapıştırmayı devre dışı bırakır
  • start yerine oturtulduğunda öğenin başlangıcını kaydırma kutusunun çıtçıtına hizalar
  • end yerine oturtulduğunda öğenin ucunu kaydırma kutusunun çıtçıt kısmıyla hizalar
  • center yerine oturtulduğunda öğenin merkezini kaydırma kutusunun çıtçıt kısmıyla hizalar

Misal

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
69 68 11 * 79 11

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

İlişkili

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Kaynaklar

  • CSS Scroll Snap W3C Aday Önerisi
  • Pratik CSS Kaydırma Yapıştırma
  • CSS Kaydırma Ekleme Noktalarına Giriş