Kaydırmalı durdurma - CSS Hileleri

Anonim

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-stopkaydı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-typealmanak girişine bakın.

scroll-snap-stopkaydı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 verir
  • always 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ş