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

  • inovationgmbh

    inovationgmb

    28 EYLÜL 2010
  • segtlim

    segtlim

    21 EKİM 2008
  • SPBedition

    SPBedition

    24 HAZİRAN 2013