-webkit-overflow-scrolling: chạm và 'Nhấn vào thanh trạng thái để cuộn lên trên'

Question

Navigate to this fiddle trên iPhone và thông báo rằng mặc dù có tuyên bố -webkit-overflow-scrolling:touch, tính năng 'chạm vào đầu' vẫn hoạt động. Điều này đã được thử nghiệm trên iPhone 4 chạy iOS 6.1 và iPhone 4S chạy iOS 5.0.1.

thử nghiệm Điều này đặt ra câu hỏi: không tuyên bố -webkit-overflow-scrolling:touch ảnh hưởng đến 'bar tap trạng thái để di chuyển đến đầu' hành vi trong iOS?

Answer 1

Nếu bạn đặt -webkit-overflow-scrolling:touch trên bất kỳ yếu tố khác hơn là document.body, nó sẽ phá vỡ các thanh trạng thái tap mặc định để di chuyển đến đầu hành vi.

Có một tập lệnh nhỏ trên GitHub, hoạt động dưới dạng replacement for the missing scroll to top of iOS overflow scrolling. Bạn có thể đặt nó trên tiêu đề ứng dụng của bạn để đạt được gần như cùng một kết quả.

Answer 2

Từ kinh nghiệm của tôi, nó thực sự ảnh hưởng đến nó. Tôi không biết cách nào để có cả hai tính năng hoạt động cùng một lúc, ít nhất là iOS 6.1.

Tôi cũng có một trích dẫn từ các jQuery Mobile docs rằng sao này lên:

Các -webkit-overflow-scrolling: sở hữu cảm ứng dường như vô hiệu hóa các sự kiện để di chuyển bạn lên đầu trang khi thời gian được nhấn vào thanh trạng thái. Chúng tôi hy vọng Apple sẽ sửa lỗi này vì đây là một tính năng rất hữu ích.

Thật không may là Apple đã thiết lập như thế này, vì tôi cũng rất thích sử dụng tính năng này, nhưng khả năng cuộn lên đầu là quan trọng hơn đối với tôi.

Answer 3

Fiddle của bạn không phá vỡ hành vi “nhấn thanh trạng thái để di chuyển lên đầu”, vì bạn đã áp dụng -webkit-overflow-scrolling: touch; cho phần tử body. Nếu bạn áp dụng nó cho bất kỳ yếu tố bên trong của body vi phạm hành vi.

Answer 4

Có một khoảng cách này - http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

Matteo Spinelli, tác giả của iScroll, tiết lộ trong một tweet rằng nó thực sự không khó chút nào để đạt được điều này. Khi bạn chạm vào thanh trạng thái, sự kiện cuộn trên đối tượng cửa sổ sẽ được kích hoạt. Sử dụng sự kiện người nghe, bạn có thể dễ dàng gọi hàm scrollTo để cuộn đến đầu danh sách.

window.addEventListener('scroll', function(){ 
    yourscrollobject.scrollTo(0,0,duration); 
}, false); 

Answer 5

Như hầu hết các câu trả lời ở đây đã lưu ý, đặt -webkit-overflow-scrolling: touch trên bất kỳ phần tử nào khác ngoài document.body gây ra sự cố. Nếu bạn đang sử dụng một tiêu đề cố định và không muốn thêm bất kỳ phụ thuộc, điều này sẽ làm các trick cho bất cứ ai sử dụng JQuery:

$('.fixed-header').on('click',function(e){ 
    var $scrollingElement = $('.scrolling-element'); 

    $scrollingElement.css('overflow','hidden'); 
    $scrollingElement.animate({ scrollTop: 0 }, "fast", function() { 
     $scrollingElement.css('overflow','auto'); 
    }); 
}); 

Mục đích của chuyển đổi qua lại các overflow tài sản là cho các thiết bị sử dụng đà di chuyển. Điều này ngay lập tức dừng bất kỳ động lượng nào và thực hiện hoạt ảnh cuộn. Tôi đã biến phần tử cuộn thành biến chỉ để chúng tôi không cần truy vấn DOM nhiều lần một cách không cần thiết. Hy vọng điều này sẽ giúp ai đó ra đường. Nếu bạn muốn được bàn tay về nó, dự án github @patrick liên kết để trông giống như một giải pháp tuyệt vời.