CSS ile Mobilde Kaydırma Hassaslığı

Bildiğiniz gibi mobil için ayrı ayrı css kodları yazmak durumundayız, çünkü mobil tarayıcılar henüz her özelliği desteklemediği gibi, sadece mobil tarayıcılar için özelliklerde mevcut. Hal böyle olunca, yazarken dikkat edilmesi gereken bazı durumlar oluyor. Bu makalede en temel problem olan kaydırma problemini ele alacağız.

Nedir bu problem dersenizde, aşağıdaki gif’e gözatalım;

Şimdi bunun html ve css kodları şu şekilde;

<div class="content">
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
........
</div>
<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
}
</style>

Hal böyle olunca kayma hassaslığı yok, ios cihazlarda boncuk boncuk kayar normalde. İşte kaymaya bu ivmeyi kazandırmak için css’de ufak bir kod eklemek gerekiyor. Yani kısaca;

<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
</style>

Ve sonuç ise;

İyi kodlamalar <3

Yazar: Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS ile Mobilde Kaydırma Hassaslığı” için bir yorum

Mehmet için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.