iOS Safari ve WebView’de Rubber Band Efektini Kaldırmak

Web sitesi veya uygulaması Safari üzerinde çalışırken, yukarı doğru kaydıracak bir içerik olmamasına rağmen kullanıcı yukarı doğru kaydırdığında oluşan elastik "daha fazla yukarı gidemezsiniz" durumuna Rubber band effect diyoruz.

Bu efekti bazı durumlarda, özellikle webview üzerine gömülü Cordova benzeri sistemlerde kaldırmanız gerekebilir. Bu yazıda birkaç şekilde bu efekti nasıl de aktive edebileceğimiz üzerine birkaç not alacağım.

Öncelikle an itibariyle iOS Safarinin geliştiricilere bu özelliğin kapatılabilmesi ile alakadar sunduğu herhangi bir seçenek bulunmuyor. Bu özelliği kapatmak için geliştiricilerin kullandığı ve akla gelen ilk özellik, sitenin tamamını bir taşıyıcı fixed div içerisine alıp bu div'e de overflow:scroll özelliği vererek taşıyıcı bir pencere oluşturmak oluyor.

Kod ile bahsedersek;

<style>
html, body {
   height:100%;
}
#tasiyici { 
   position:fixed;
   top:0px; left:0px;
   height:100%;
   width:100%;
   overflow:scroll;
}
</style>
<div id="tasiyici">
  yukarı çekilemeyen içeriğiniz
</div>

Bu kod için html ve body elementleri için de 100% yükseklik vererek tasiyici divi için atadığım yükseklik değerini aktive ettiğime dikkat ediniz.

Bu çözüm gayet güzel ve çoğu zaman işimizi görüyor. Fakat bazı durumlarda üzerinde değişiklik yaptığınız içeriğin html hub'ına erişiminiz bulunamıyor veya taşıyıcı fixed bir div kullanmak sisteminizdeki diğer bazı ögelerin çalışmasının önüne geçebilir. Bu tip bir durumda ikincil çözümü uygulayabilirsiniz.

İkincil çözüm, benim de bu tip bir sorunla karşılaştığımda ve kendi ürettiğim bir çözüm oldu. Bu çözümde eğer kullanıcı sayfanın en üstündeyse, yani window scrollTop değeri sıfır ise, yukarı doğru scroll yaptığında (eksi scroll) bu durumu geçersiz saymalıyız. Yazdığım kodu şu şekilde görelim;

var startY = 0;
document.addEventListener('touchstart', function(e) {
    startY = e.touches[0].screenY;
});

document.addEventListener('touchmove', function(e) {
    var amountMovedY = e.touches[0].screenY - startY;
    if (amountMovedY > 0) {
        e.preventDefault();
    }
});

Tartışma konusu için: @stackoverflow.com

Yorumları Göster veya Yeni Yorum Yaz