Satır içi başlangıç ​​tarafında Kaydırılabilir Alanları Kırpma

0
17

Bu, türünün ilk örneği olan blog yazısı. Ben sadece “Bilmiyor olabilirsiniz” dedim. Bunun için, kaydırılabilir alanları kırpmanın varsayılan davranışı hakkında bir şeyler paylaşmak istiyorum.

Dekoratif bir sözde öğeye sahip bir bölümümüz olduğunu varsayalım (Belge yönü LTR’dir).

.section :: {konumdan önce: mutlak; sol: -20px; üst: 5px; genişlik: 150px; yükseklik: 75px; arkaplan: url (“img / dice.svg”) center / cover no-rep; }

Sözde öğenin sol tarafta negatif bir değerle konumlandırıldığına dikkat edin. Bu herhangi bir yatay kaydırmaya neden olmaz ve taşma uygulamanıza gerek yoktur: gizli.

Tasarımcı fikrini değiştirdi ve dekoratif unsurun doğru tarafta olmasını istiyor, bu yüzden aşağıdakileri yaparsınız.

.section :: before {/ * Soldan sağa * / sağ ile yer değiştirdiniz: -20px; }

Boom! Yatay bir kaydırma çubuğumuz var. Sözde öğe sağ tarafa taşındığında bu neden oldu? Ondan önce iyi çalışmıyor muydu?

Bunun nedeni, tarayıcı kullanıcı aracısının blok başlangıç ​​ve satır içi başlangıç ​​alanlarının taşma alanını kırpmasıdır. İlk örnekte, sözde öğe sol tarafa negatif bir kenar boşluğu ile yerleştirildi. Bu, satır içi başlangıç ​​olarak kabul edilir, bu nedenle tarayıcı onu bizim için kırptı.

CSS spesifikasyonuna göre:

Kullanıcı arabirimleri, kutunun blok başlangıç ​​ve satır içi başlangıç ​​taraflarındaki kaydırma konteynerlerinin kaydırılabilir taşma alanını kırpmalıdır (böylece, o tarafta kaydırılabilir taşma yokmuş gibi davranırlar).

Sağdan sola belgeler (RTL)

Sağdan sola başlayan bir belge için (örneğin: Arapça web sitesi), belgenin satır içi başlangıcı sağ tarafta olacaktır. Bu, sağ tarafa negatif bir değer içeren bir sözde eleman yerleştirilirse, tarayıcı bizim için taşmayı keser.

Kökte dir = “rtl” varsa, satır içi başlangıç ​​sağ tarafta olacaktır.

İlginç bulduğum şey, Firefox’un yön RTL olmasına ve öğenin sağda konumlandırılmasına rağmen yatay bir kaydırma çubuğu göstermesidir. Chrome ve Safari, öğeyi beklendiği gibi görüntülüyor.

Firefox’un davranışını daha fazla araştıracağım. Şimdilik, bir kaydırma çubuğu görüneceğinden, öğeleri üstlerinin dışına yerleştirirken dikkatli olun. Şimdi çözüm, overflow-x: hidden’ı kullanmaktır.

Bir e-kitap yazdım

CSS’de Hata Ayıklama hakkında bir e-kitap yazdığımı bildirmekten heyecan duyuyorum.

Eğer ilgileniyorsanız, ücretsiz bir önizleme için debuggingcss.com adresine gidin.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz