Kaydırma-çıtçıt tipi - CSS Hileleri

Anonim

scroll-snap-typeMülkiyet CSS Kaydırma çekin Modülü parçasıdır. Kaydırarak yapıştırma, pencere (veya kaydırılabilir bir kap) kaydırıldığında görünüm penceresinin konumunu sayfadaki belirli öğelere "kilitlemek" anlamına gelir. Bunu, görüntü alanının tepesine yapışan ve sayfayı kaydırmayı durdurmaya zorlayan bir öğenin üzerine bir mıknatıs koymak gibi düşünün.

Bu, tarayıcıyı sayfanın belirli noktalarında durdurmak istiyorsanız kullanışlıdır. Örneğin: Bir fotoğraf galerisine göz atan bir kullanıcı muhtemelen bir görüntünün yarısına kadar kaydırmak istemez - muhtemelen görüntüyü kaydırırken doğru konuma "yakalamasını" tercih eder. Kaydırarak yapıştırma, geliştiricilere bu davranışı halletmek için saf bir CSS yolu sağlar.

scroll-snap-typekaydırma yapıştırması eklemek istediğiniz herhangi bir kaydırılabilir kapta gerekli bir özelliktir. Kaydırma kabı için üç soruyu yanıtlar:

  1. Kapsayıcı kaydırmalı tutturma kullanıyor mu?
  2. Hangi eksende - x (yatay), y (dikey), blok veya satır içi - kaydırmalı yaslama uygulanmalıdır?
  3. Kaydırarak yapıştırma nasıl davranmalıdır? Zamanın% 100'ünde zorlanıyor mu yoksa sadece kullanıcı bir anlık konuma "yeterince yaklaştığında" mı etkili oluyor? Bununla ilgili daha sonra daha fazlası.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sözdizimi

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Değerler

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

  • none kaydırarak yapıştırmayı devre dışı bırakır.
  • x yalnızca x ekseni boyunca kaydırarak yapıştırmayı etkinleştirir.
  • y yalnızca y ekseni boyunca kaydırarak yapıştırmayı etkinleştirir.
  • block yalnızca blok ekseni boyunca kaydırarak yapıştırmayı etkinleştirir.
  • inline yalnızca satır içi eksen boyunca kaydırarak tutturmayı etkinleştirir.
  • bothher iki eksen boyunca kaydırarak yapıştırmayı etkinleştirir ( xve y, veya inlineve olarak düşünebilirsiniz block.
  • mandatory tarayıcıya, kaydırma olmadığında her zaman bir anlık konuma gitmesini söyleyen bir katılık değeridir.
  • proximity, tarayıcıya bir kaydırma eylemi bir snap konumuna oldukça yaklaştığında bir snap konumuna gitmesini söyleyen bir katılık değeridir. Oldukça yakın değilse, tarayıcı takılmamalıdır ve kaydırma işlemi normal şekilde davranacaktır.

Misal


CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen scroll-snap-type örneğine bakın.

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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Kaynaklar

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