Geçen yıllara nazaran geçtiğimiz her yıl, mobil aygıtlar ile web sitelerimize daha çok ziyaretçi geldiğinin farkındasınızdır. Bugün izlediğim 1dakika 24 saniyelik bu video sizleri sıkmadan anlatacaktır da … Mobil aygıtlar devreye girince, yazdığımız kodları daha dikkatli yazmak, sadece PC browser’lerinde değil de çeşitli mobil aygıtlardan ( iPad, iPhone … ) da bakmak gerekmekte.

overflow: auto Sorunsalı

Web sayfalarına nazaran, iOS tabanlı mobil cihazlardaki scroll mekanizması farklı işliyor. iOS üzerinde, aşağıya doğru sayfayı kaydırmak istediğimizde hızlıca aşağıya inen sayfa, inmek istediğimiz noktada otomatik olarak yavaşlıyor ve kullanıcının gözünde güzel bir etki yaratıyor. Neyse …

overflow değeri sizlerin de bildiği üzere, konteynır içerisinde bulunan bir element, eğer o konteynır boyutlarını aşıyorsa scroll çıkarıyor. Her şey güzel çalışırken iOS tabanlı mobil aletlerde scroll sıkıntı yaratıyormuş meğersem. Sorunun çözümü ise çok basit:

[code lang=“css”] overflow-y: scroll; [/code]

Yukarıdaki değer ile bu sorunu kolaylıkla aşıyoruz.

”-webkit-overflow-scrolling: touch” Özelliği

Yukarıda bahsettiğim iOS tabanlı tarayıcılarda smooth bir şekilde, scroll’un kayması ve sonuna doğru yavaşlaması için CSS’de bize yardımcı olabilecek kod ise:

[code lang=“css”] -webkit-overflow-scrolling: touch; [/code]