iPhone / iPad için javascript kaydırma etkinliği?

İPad'de kaydırma olayını yakalayamıyorum. Bunların hiçbiri işe yaramıyor, neyi yanlış yapıyorum?

window.onscroll=myFunction;

document.onscroll=myFunction;

window.attachEvent("scroll",myFunction,false);

document.attachEvent("scroll",myFunction,false);

Hepsi Windows'ta Safari 3'te bile çalışır. İronik olarak, bilgisayardaki HER tarayıcı, window.onload=mevcut olayları bozmaktan rahatsız olmazsanız destekler . Ama iPad'e gitme.

İPhoneOS, onscrollbeklediğiniz yol dışında olayları yakalar .

onscrollŞekil 6-1'de gösterildiği gibi , tek parmakla kaydırma, kullanıcı kaydırmayı durdurana kadar herhangi bir olay oluşturmaz — sayfa hareket etmeyi durdurduğunda ve yeniden çizildiğinde bir olay oluşturulur - Şekil 6-1'de gösterildiği gibi.

Benzer şekilde, onscrollyalnızca kaydırmayı durdurduktan sonra 2 parmağınızla kaydırın .

İşleyiciyi kurmanın olağan yolu, örn.

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc 

(Ayrıca bkz. Https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

İOS için touchmove olayını ve bunun gibi kaydırma olayını kullanmanız gerekir :

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

Eski bir gönderiye başka bir yanıt eklediğim için özür dilerim, ancak bu kodu kullanarak genellikle çok iyi bir kaydırma olayı alıyorum (en azından 6.1'de çalışıyor)

element.addEventListener('scroll', function() {
    console.log(this.scrollTop);
});

// This is the magic, this gives me "live" scroll events
element.addEventListener('gesturechange', function() {});

Ve bu benim için çalışıyor. Yapmadığı tek şey, kaydırmanın yavaşlaması için bir kaydırma olayı vermektir (Yavaşlama tamamlandığında, son bir kaydırma olayı alırsınız, bununla yapacağınız gibi yapın.), Ancak bunu yaparak css ile ataleti devre dışı bırakırsanız

-webkit-overflow-scrolling: none;

Klasik olanı yapmanız gerekse de vücut için öğelerinizde atalet almazsınız.

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

Bu soruna iScroll ile ivme kaydırma hissi ve her şeyle harika bir çözüm bulabildim https://github.com/cubiq/iscroll Github belgesi harika ve çoğunlukla onu takip ettim. İşte uygulamamın ayrıntıları.

HTML: İçeriğimin kaydırılabilir alanını iScroll'un kullanabileceği bazı div'lere sardım:

<div id="wrapper">
  <div id="scroller">
    ... my scrollable content
  </div>
</div>

CSS: Stil değişikliklerimi yalnızca dokunmatik cihazlara hedeflemek için "dokunma" için Modernizr sınıfını kullandım (çünkü yalnızca dokunulduğunda iScroll'u başlattım).

.touch #wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.touch #scroller {
  position: absolute;
  z-index: 1;
  width: 100%;
}

JS: iScroll indirmesinden iscroll-probe.js'yi ekledim ve ardından kaydırma çubuğunu aşağıdaki gibi başlattım; burada updatePosition, yeni kaydırma konumuna tepki veren işlevimdir.

# coffeescript
if Modernizr.touch
  myScroller = new IScroll('#wrapper', probeType: 3)
  myScroller.on 'scroll', updatePosition
  myScroller.on 'scrollEnd', updatePosition

Kaydırma ofsetine bakmak yerine, geçerli konumu şimdi almak için myScroller'ı kullanmanız gerekir. İşte http://markdalgleish.com/presentations/embracingtouch/ adresinden alınan bir işlev (süper yararlı bir makale, ancak şu anda biraz modası geçmiş)

function getScroll(elem, iscroll) {   
  var x, y;

  if (Modernizr.touch && iscroll) {
    x = iscroll.x * -1;
    y = iscroll.y * -1;   
  } else {
    x = elem.scrollTop;
    y = elem.scrollLeft;   
  }

  return {x: x, y: y}; 
}

Aldığım diğer tek şey, ara sıra sayfamın kaydırmaya çalıştığım bir kısmını kaybediyordum ve kaydırmayı reddediyordu. #Wrapper'ın içeriğini her değiştirdiğimde myScroller.refresh () 'e bazı çağrılar eklemem gerekiyordu ve bu sorunu çözdü.

DÜZENLEME: Başka bir fark, iScroll'un tüm "tıklama" olaylarını yemesiydi. İScroll'un bir "dokunma" olayı yayması ve "tıklama" olayları yerine bunları işlemesi seçeneğini etkinleştirdim. Neyse ki kaydırma alanına fazla tıklamaya ihtiyacım yoktu, bu yüzden bu önemli bir şey değildi.

İOS 8 çıktığından beri bu sorun artık yok. Kaydırma etkinliği artık iOS Safari'de de sorunsuz bir şekilde tetikleniyor.

Dolayısıyla, scrollolay işleyicisini kaydedip bu olay işleyicisinin window.pageYOffsetiçini kontrol ederseniz , her şey yolunda gider.