Làm thế nào để đồng bộ hóa độ lệch cuộn của hai phần tử khi di chuyển quán tính

Question

Tôi cần giữ cho độ lệch cuộn của phần tử được đồng bộ với phần tử khác (cửa sổ thực sự) và tôi đang gặp sự cố trong giai đoạn "cuộn" quán tính cuộn trên Mobile Safari (iPad).

Tôi có một vài divs với position:fixed; overflow:hidden và tôi cần phải giữ cuộn của họ bù đắp đồng bộ với một của sổ Thông thường tôi muốn mã hóa nó như thế này (jQuery) (có nghĩa là toàn bộ cuộn cơ thể.):

var $win = $(window), 
    $div1 = $(...) 

$win.scroll(function() { 
    $div1.scrollTop($win.scrollTop()) 
}) 

Nhưng thử nghiệm giao diện trên iPad, tôi nhận thấy rằng div không được cập nhật trong giai đoạn cảm ứng, khi bạn đang kéo trang ảo bằng ngón tay, cũng như trong giai đoạn quán tính, khi bạn rời trang và chậm lại.

Tôi đã giải quyết nó cho giai đoạn kéo bằng cách đăng ký trình xử lý cho sự kiện touchmove cũng như sự kiện scroll.

Nhưng tôi không thể tìm cách giải quyết vấn đề cho giai đoạn quán tính. Các div vẫn còn (và đi từ từ đồng bộ với phần còn lại của trang) cho đến khi các phong trào quán tính đến một điểm dừng đầy đủ, khi sự kiện di chuyển cuối cùng đã bị sa thải và nó bỏ qua vào vị trí.

Here's a working demo.

Cố gắng di chuyển nó trên một iPad để xem "scolling quán tính" vấn đề. Thật không may tôi không thể làm cho nó hoạt động trên jsFiddle, do hành vi kỳ lạ của iPad với cuộn iframe.

Nếu tôi chỉ có thể chạy một cuộc thăm dò trong giai đoạn đó, tôi có thể giữ một semblance đồng bộ hóa giữa hai yếu tố. Tôi đã thử với setTimeout, setInterval và requestAnimationFrame, nhưng không ai trong số họ kích hoạt trong giai đoạn cuộn quán tính. Dường như tất cả các điểm dừng Javascript trong giai đoạn đó.

Câu hỏi:

• Có bất kỳ liên lạc hoặc sự kiện cuộn sa thải trong giai đoạn di chuyển quán tính?
• Có bất kỳ cách nào để chạy cuộc gọi lại Javascript trong giai đoạn đó không?
• Có cách nào để đồng bộ hóa độ lệch cuộn của hai phần tử (X hoặc Y, không phải cả hai) bằng cách sử dụng CSS hoặc một số công nghệ khác ngoài JS?

Answer 1

OldDrunkenSailor đánh bại tôi để đề xuất iScroll.

Thật không may, ra khỏi hộp iScroll chỉ sao chép cùng một vấn đề như cuộn quán tính bản địa - không có xử lý sự kiện trong giai đoạn quán tính.

Dưới đây là một phiên bản của bản demo của bạn với một iScroll khỉ vá để thêm một sự kiện tùy chỉnh mà cháy ngay cả trong giai đoạn quán tính: https://dl.dropbox.com/u/15943645/scrollingdemo.html

công trình lớn trên thế hệ iPad thứ 2 của tôi.

JS:

// Disable touch events 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

// Patch iScroll for position change custom event 
iScroll.prototype._oldPos = iScroll.prototype._pos; 
iScroll.prototype._pos = function(x, y) { 
    this._oldPos(x, y); 
    if (this.options.onPositionChange) this.options.onPositionChange.call(this); 
} 

$(function() { 
    var $win = $(window), 
     $div_cols = $('#cols'), 
     $div_rows = $('#rows'), 
     $div_body = $('#body') 

    // attach scrolling sync handler and execute it once 
    function sync_scroll(e) { 
     $div_cols.scrollLeft(0 - $div_body.position().left); 
     $div_rows.scrollTop(0 - $div_body.position().top); 

    }   

    // initialize iScroll on wrapper div, with position change handler 
    var myScroll = new iScroll('iscroll_wrapper', { 
     bounce: false, 
     onPositionChange: sync_scroll 
    }); 
}) 

CSS:

#iscroll_wrapper { 
    position:absolute; 
    z-index: 1; 
    left: 168px; 
    top:77px; 
    bottom:0px; 
    right:0; 
    overflow:auto; 
} 

#body { 
    position:absolute; 
    z-index: 1; 
    width: 2046px; 
    height: 3376px; 

} 

Lưu ý chỉ cơ thể phản ứng với các sự kiện chạm, nhưng bạn có thể mở rộng kỹ thuật để các hàng và cols divs cho mối quan hệ ngược lại.

Answer 2

Kích hoạt khi cuộn bắt đầu. Lưu ý rằng các thiết bị iOS đóng băng thao tác DOM trong khi cuộn, xếp hàng chúng để áp dụng khi quá trình cuộn kết thúc. Chúng tôi hiện đang điều tra các cách để cho phép các thao tác DOM áp dụng trước khi bắt đầu cuộn.

http://jquerymobile.com/demos/1.0rc1/docs/api/events.html#/demos/1.0rc1/docs/api/events.html

Thats những gì họ đã phải nói dưới cuộn bắt đầu phần

Answer 3

iOS thực sự đóng băng DOM thao tác và Javascript trong khi di chuyển quán tính đang xảy ra. Đây là một bản demo đơn giản mà tôi đã thực hiện để minh họa sự khác biệt giữa di chuyển trong một môi trường máy tính để bàn thông thường so với iPad: http://jsfiddle.net/notjoelshapiro/LUcR6/.Mã này chỉ có JS này trong đó:

var num = 0; 
function updateNum(){ 
    num++; 
    $('#awesomeDiv').text(num); 
} 
$(window).scroll(updateNum); 

Khi cuộn nó tăng số và hiển thị nó ở cuối trang. Bạn sẽ thấy rằng số cuộn ở cuối màn hình chỉ được tăng lên khi cuộn quán tính dừng lại. Nếu Javascript đang hoạt động ở chế độ nền, nó sẽ không làm mới cho đến khi cuộn kết thúc nhưng số sẽ được tăng lên cao hơn.

Vì vậy, để giải đáp thắc mắc của bạn đặc biệt:

Có bất kỳ liên lạc hoặc sự kiện cuộn sa thải trong giai đoạn di chuyển quán tính?

Phủ định, ghostrider.

Có cách nào để chạy gọi lại Javascript trong giai đoạn đó không?

Xem ở trên.

Có cách nào để đồng bộ hóa độ lệch cuộn của hai phần tử (X hoặc Y, không phải cả hai) bằng cách sử dụng CSS hoặc một số công nghệ khác ngoài JS?

Không hoàn toàn chắc chắn ý của bạn ở đây, JS có thể thực hiện tất cả toán học mà bạn cần nhưng nó sẽ phải là khi cuộn quán tính hoàn tất. Thành thật mà nói, đây có thể là một triệu chứng của tl; dr kể từ khi tôi đang làm việc ngay bây giờ.

Bạn đã xem thư viện iScroll chưa? Nó mô phỏng cuộn liên tục (hoặc không quán tính) cho môi trường cảm ứng và không chạm và cung cấp cho bạn lời gọi JS trong/sau "cuộn" và "cuộn quán tính" và cung cấp nhiều thông tin mà bạn có thể sử dụng để tính toán bạn đang ở đâu trang.