Kaydırmalı dolgu - CSS Hileleri

Anonim

scroll-padding, 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-paddingherhangi bir kaydırmalı kap için isteğe bağlı bir özelliktir. Kaydırmalı kaplar, scroll-snap-typeözellik dışında herhangi bir değere ayarlandığında tanımlanır none. Kaydırmalı kaplar hakkında daha fazla bilgi için scroll-snap-typealmanak girişine bakın.

Tamam, kaydırma dolgusuna geçiyorum

scroll-paddingyapıştırma kutusunun optimum görüntüleme bölgesini ayarlamak için kullanılır. Bu, kabın içindeki öğeleri gizleyen sabit bir başlık gibi öğelere sahipse veya kaydırılabilir konteyner, yerine "oturtulduktan" sonra iç öğelere nefes alması için alan sağlamak için biraz alana ihtiyaç duyuyorsa yararlıdır.

Basit bir örnek , kabın üstünde ve solunda scroll-paddingbazı sabit aralıklar oluşturmak için kullanılabilir 50px:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Pembe renkli alanlar, kaydırmaya yaslanan kapsayıcıdaki kaydırma dolgusunu gösterir.

Sözdizimi

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Uzun ellerle ilgili önemli not: Chrome şu anda uzun el biçimini scroll-paddingve scroll-marginözelliklerini desteklememektedir. Maksimum tarayıcı desteği için steno kullanın. Daha fazla ayrıntı ve mevcut durum için krom hata izleyicide bu soruna bakın.

Değerler

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

  • autodolguyu tarayıcı / kullanıcı aracısı tarafından belirlenecek şekilde bırakır. Genellikle bu, 0px değeri anlamına gelir, ancak kullanıcı aracısı başka bir değerin daha uygun olduğuna karar verirse sıfır olmayabilir.
  • Benzer yazılır paddingdeğer birimleri ile tanımlanabilir ve diğer özellikleri ( px, em, vhvs.) ya da kabın kendisinin bir yüzdesi olarak verilmiştir.

Misal


CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem kaydırma dolgusu ö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-snap-type
  • 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ş