SORU
19 NİSAN 2012, PERŞEMBE


iOS overscroll devre dışı ama kaydırılan divs normalde ilerlemek için Nasıl izin Safari–?

İPad tabanlı bir web uygulaması üzerinde çalışıyorum, ve bir web sayfası daha az gibi görünüyor, böylece overscrolling önlemek gerekiyor. Şu anda bu görüş dondurma ve overscroll devre dışı bırakmak için kullanıyorum:

document.body.addEventListener('touchmove',function(e){
      e.preventDefault();
  });

Bu büyük devre dışı bırakma overscroll kadar çalışır, ama sorun benim app içinde kaydırılan divs bir numarası vardır. Yukarıdaki kod kaydırma engeller.

İScroll gibi hacky çözümleri kullanmaktan kaçının başaramadım yani iOS5 ve üzeri tek hedef. Bunun yerine, kaydırılan benim divs için bu CSS kullanıyorum:

.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
}

Bu mükemmel belge overscroll komut dosyası olmadan çalışıyor, ama yukarıda da belirtildiği gibi etkin olduğunda bu divs ölü öldürür.

Kullanmak için herhangi bir yolu overscroll düzeltme ama muafiyet var benim $('.kaydırılan') divs?

Çözüm bir çeşit jQuery plugin gerektirmez bunun için var. Çok severim iScroll ya da sert başka bir çözüm kullanarak önlemek istiyorsanız yani, kaydırma divs bu komut devre dışı olduğunda mükemmel bir iş, dedim.

Teşekkürler!

DÜZENLEME:

(Ama mükemmel değil) iyi bir çözüm olan bir şey buldum:

 // Disable overscroll / viewport moving on everything but scrollable divs
 $('body').on('touchmove', function (e) {
         if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
 });

Bu iş yok, ama görüş hala dıv başına veya sonuna kaydırma yaptığınızda taşır. Gerçekten tam da devre dışı bırakmak için bir yol bulmak istiyorum.

CEVAP
9 Ocak 2013, ÇARŞAMBA


Bu div başında veya sonunda kaydırma yaptığınızda bu sorunu çözer

var selScrollable = '.scrollable';
// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
// Uses body because jQuery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', selScrollable, function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop   e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
// Stops preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', selScrollable, function(e) {
  e.stopPropagation();
});

Bu ise tam sayfa bir div taşma olmadığında kaydırma engellemek istiyorsanız işe yaramaz unutmayın. Bunu engellemek için, hemen yukarıdaki yerine aşağıdaki olay işleyicisi kullanın (this question uyarlanmıştır):

$('body').on('touchmove', selScrollable, function(e) {
    // Only block default if internal div contents are large enough to scroll
    // Warning: scrollHeight support is not universal. (http://stackoverflow.com/a/15033226/40352)
    if($(this)[0].scrollHeight > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Chanre Joubert

    Chanre Joube

    27 Temmuz 2012
  • New Scientist

    New Scientis

    27 Kasım 2006
  • NLthomas21

    NLthomas21

    20 Mayıs 2008