scroll-snap-stop
, 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-stop
kaydırarak yapıştırma kapsayıcı içinde kaydırarak yapıştırma öğesi için isteğe bağlı bir özelliktir. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-type
almanak girişine bakın.
scroll-snap-stop
kaydırarak yapıştırılan kapsayıcıyı belirli bir öğeye yapışmaya zorlamanıza olanak tanır. Kaydırmalı bir kap içinde kaydırdığınızı ve ona fare tekerleğinin dev bir dönüşünü verdiğinizi varsayalım. Normalde, tarayıcı, kaydırmanın normalde biteceği yere yakın bir yakalama noktasına yerleşene kadar kaydırma hızınızın uçma noktalarını geçmesine izin verirdi. Ayarlayarak scroll-snap-stop
, tarayıcıya, kullanıcının onu geçmesine izin vermeden önce belirli bir öğe üzerinde durması gerektiğini söyleyebilirsiniz.
/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )
Sözdizimi
scroll-snap-stop: normal | always;
Değerler
scroll-snap-stop
aşağıdaki değerleri kabul eder:
normal
varsayılan değerdir ve bir öğenin yapışmadan kaydırılarak geçmesine izin veriralways
kaydırma normalde bu öğeyi geçse bile tarayıcıyı bu öğeye yapışmaya zorlar
Misal
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen scroll-snap-stop ö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 |
Chrome'un şu anda desteklemeyebileceğini unutmayın scroll-snap-stop: always;
.
İlişkili
scroll-snap-type
scroll-margin
scroll-padding
scroll-snap-align
Kaynaklar
- CSS Scroll Snap W3C Aday Önerisi
- Pratik CSS Kaydırma Yapıştırma
- CSS Kaydırma Ekleme Noktalarına Giriş