acara gulir javascript untuk iPhone / iPad?

Sepertinya saya tidak bisa menangkap acara gulir di iPad. Tak satu pun dari ini berhasil, apa yang saya lakukan salah?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Semuanya bekerja bahkan di Safari 3 di Windows. Ironisnya, SETIAP browser di PC mendukung window.onload=jika Anda tidak keberatan mengganggu acara yang ada. Tapi jangan pergi di iPad.

IPhoneOS memang merekam onscrollacara, kecuali tidak seperti yang Anda harapkan.

Penggeseran satu jari tidak menghasilkan peristiwa apa pun hingga pengguna berhenti menggeser — onscrollperistiwa dibuat saat halaman berhenti bergerak dan menggambar ulang — seperti yang ditunjukkan pada Gambar 6-1.

Demikian pula, gulir dengan 2 jari aktif onscrollhanya setelah Anda berhenti menggulir.

Cara biasa memasang handler bekerja mis

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

(Lihat juga https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Untuk iOS Anda perlu menggunakan acara touchmove serta acara gulir seperti ini:

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
}

Maaf telah menambahkan jawaban lain ke posting lama tetapi saya biasanya mendapatkan acara gulir dengan sangat baik dengan menggunakan kode ini (berfungsi setidaknya pada 6.1)

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

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

Dan itu berhasil untuk saya. Satu-satunya hal yang tidak dilakukannya adalah memberikan acara gulir untuk perlambatan gulir (Setelah perlambatan selesai Anda mendapatkan acara gulir terakhir, lakukan apa yang Anda inginkan.) Tetapi jika Anda menonaktifkan inersia dengan css dengan melakukan ini

-webkit-overflow-scrolling: none;

Anda tidak mendapatkan inersia pada elemen Anda, untuk tubuh Anda mungkin harus melakukan yang klasik

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

Saya bisa mendapatkan solusi hebat untuk masalah ini dengan iScroll, dengan nuansa momentum scrolling dan semuanya https://github.com/cubiq/iscroll Doc github hebat, dan saya kebanyakan mengikutinya. Berikut detail implementasi saya.

HTML: Saya membungkus area konten saya yang dapat digulir dalam beberapa div yang dapat digunakan oleh iScroll:

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

CSS: Saya menggunakan kelas Modernizr untuk "sentuh" ​​untuk menargetkan perubahan gaya saya hanya untuk perangkat sentuh (karena saya hanya membuat contoh iScroll saat disentuh).

.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: Saya menyertakan iscroll-probe.js dari unduhan iScroll, dan kemudian menginisialisasi scroller seperti di bawah ini, di mana updatePosition adalah fungsi saya yang bereaksi terhadap posisi scroll baru.

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

Anda harus menggunakan myScroller untuk mendapatkan posisi saat ini, daripada melihat scroll offset. Ini adalah fungsi yang diambil dari http://markdalgleish.com/presentations/embracingtouch/ (artikel yang sangat membantu, tapi agak ketinggalan zaman sekarang)

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}; 
}

Satu-satunya gotcha lain adalah kadang-kadang saya akan kehilangan bagian dari halaman saya yang saya coba gulir, dan itu akan menolak untuk menggulir. Saya harus menambahkan beberapa panggilan ke myScroller.refresh () setiap kali saya mengubah konten #wrapper, dan itu menyelesaikan masalah.

EDIT: Gotcha lain adalah bahwa iScroll memakan semua acara "klik". Saya mengaktifkan opsi agar iScroll mengeluarkan acara "ketuk" dan menanganinya alih-alih acara "klik". Untungnya saya tidak perlu banyak mengklik di area gulir, jadi ini bukan masalah besar.

Sejak iOS 8 keluar, masalah ini tidak ada lagi. Acara gulir sekarang juga dijalankan dengan lancar di Safari iOS.

Jadi, jika Anda mendaftarkan scrollevent handler dan memeriksa window.pageYOffsetdi dalam event handler itu, semuanya bekerja dengan baik.