sự kiện cuộn javascript cho iPhone / iPad?

Tôi dường như không thể nắm bắt sự kiện cuộn trên iPad. Không có công việc nào trong số này, tôi đang làm gì sai?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Tất cả chúng đều hoạt động ngay cả trên Safari 3 trên Windows. Trớ trêu thay, MỌI trình duyệt trên PC đều hỗ trợ window.onload=nếu bạn không ngại chặn các sự kiện hiện có. Nhưng không đi trên iPad.

IPhoneOS thực hiện ghi lại onscrollcác sự kiện, ngoại trừ cách bạn có thể mong đợi.

Xoay bằng một ngón tay không tạo ra bất kỳ sự kiện nào cho đến khi người dùng ngừng xoay - một onscrollsự kiện được tạo khi trang ngừng di chuyển và vẽ lại — như thể hiện trong Hình 6-1.

Tương tự, cuộn bằng 2 ngón tay onscrollchỉ kích hoạt sau khi bạn ngừng cuộn.

Cách thông thường để cài đặt trình xử lý hoạt động, ví dụ:

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

(Xem thêm https://developer.apple.com/library/content/documentation/AppleApplication/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html )

Đối với iOS, bạn cần sử dụng sự kiện touchmove cũng như sự kiện cuộn như sau:

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
}

Xin lỗi vì đã thêm câu trả lời khác vào một bài đăng cũ nhưng tôi thường nhận được sự kiện cuộn rất tốt bằng cách sử dụng mã này (nó hoạt động ít nhất trên 6.1)

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

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

Và điều đó hiệu quả với tôi. Chỉ có điều nó không làm là đưa ra một sự kiện cuộn để giảm tốc độ cuộn (Khi quá trình giảm tốc hoàn tất, bạn sẽ có một sự kiện cuộn cuối cùng, hãy làm như bạn sẽ làm với nó.) Nhưng nếu bạn vô hiệu hóa quán tính với css bằng cách thực hiện điều này

-webkit-overflow-scrolling: none;

Bạn không có quán tính đối với các yếu tố của mình, đối với cơ thể mặc dù bạn có thể phải làm

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

Tôi đã có thể tìm ra giải pháp tuyệt vời cho vấn đề này với iScroll, với cảm giác cuộn động lực và mọi thứ https://github.com/cubiq/iscroll Tài liệu github rất tuyệt và tôi chủ yếu theo dõi nó. Đây là chi tiết về việc triển khai của tôi.

HTML: Tôi đã bọc vùng có thể cuộn của nội dung của mình trong một số div mà iScroll có thể sử dụng:

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

CSS: Tôi đã sử dụng lớp Modernizr cho "touch" để nhắm mục tiêu các thay đổi kiểu của tôi chỉ đến các thiết bị cảm ứng (vì tôi chỉ khởi tạo iScroll khi chạ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: Tôi đã bao gồm iscroll-probe.js từ bản tải xuống iScroll, sau đó khởi tạo cuộn như bên dưới, trong đó updatePosition là hàm của tôi phản ứng với vị trí cuộn mới.

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

Bạn phải sử dụng myScroller để có được vị trí hiện tại, thay vì nhìn vào phần bù cuộn. Đây là một chức năng được lấy từ http://markdalgleish.com/presentations/embracingtouch/ (một bài viết siêu hữu ích, nhưng hiện tại hơi lỗi thời)

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

Điểm khác duy nhất khác là thỉnh thoảng tôi sẽ mất một phần trang mà tôi đang cố cuộn đến và nó sẽ từ chối cuộn. Tôi phải thêm một số lệnh gọi vào myScroller.refresh () bất cứ khi nào tôi thay đổi nội dung của #wrapper và điều đó đã giải quyết được vấn đề.

CHỈNH SỬA: Một điểm khác là iScroll ăn tất cả các sự kiện "nhấp chuột". Tôi đã bật tùy chọn để iScroll phát ra sự kiện "nhấn" và xử lý các sự kiện đó thay vì "nhấp". Rất may, tôi không cần nhấp nhiều vào vùng cuộn, vì vậy đây không phải là vấn đề lớn.

Kể từ khi iOS 8 ra mắt, vấn đề này không còn tồn tại nữa. Sự kiện cuộn hiện cũng được kích hoạt trơn tru trong iOS Safari.

Vì vậy, nếu bạn đăng ký scrolltrình xử lý sự kiện và kiểm tra window.pageYOffsetbên trong trình xử lý sự kiện đó, mọi thứ hoạt động tốt.