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