jQuery Detect Đáy trang trên Mobile Safari/iOS

Question

tôi về cơ bản muốn cùng chức năng như facebook, twitter và tất cả các trang web cuộn "vô hạn" khác làm việc, mã im sử dụng vào lúc này là

jQuery(document).ready(function(){ 
    $ = jQuery; 
     $(window).scroll(function(){ 
      if ($('.iosSlider').is(':visible')) 
      { 
       if($(window).scrollTop() + $(window).height() == $(document).height()) 
       { 
       $.get('/our-work/fakework.php', function(data) { 
       $('#mobile-thumbs').append(data); 
       }); 
       } 
      } 
     }); 
}); 

này hoạt động hoàn hảo trên tất cả các trình duyệt máy tính để bàn, và thậm chí trên blackberry của tôi đôi khi nó hoạt động sau khi gửi thư rác xuống nút cuộn xuống.

Tuy nhiên nó không được phát hiện một lần trên iphone hoặc ipad, tôi cho rằng đó là điều cần làm với khung nhìn trên đó nhưng ai biết được.

tôi đã cố gắng sử dụng các phương pháp khung nhìn chiều cao của

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

nhưng didnt này dường như để sửa chữa nó một trong hai!

Vì vậy, xin vui lòng ai đó có thể chia sẻ một số ánh sáng trên nó xin vui lòng làm thế nào để phát hiện dưới cùng của trang trên iDevices!

Cảm ơn !!

Owen

Answer 1

Sau khi gỡ lỗi cho các lứa tuổi tôi phát hiện ra rằng

if($(window).scrollTop() + $(window).height() == $(document).height()) 

đã bao giờ thực sự bị đáp ứng, cũng nó đã nhận được gặp tuy nhiên có vẻ như Safari di động doesnt chạy bất kỳ javascript KHI viewport có vẻ di chuyển .

Điều này có nghĩa là trừ khi bạn ngừng di chuyển CHÍNH XÁC trên chiều cao tài liệu (không có điều đáy bouncy) nó sẽ rất KHÔNG THÍCH với cùng chiều cao.

Vì vậy, tôi chỉ đơn giản là thay đổi mã để thay vì bằng cùng chiều cao, để kiểm tra nếu nó bằng hoặc nhiều hơn, theo cách này nó sẽ kích hoạt ngay cả khi nó đã được cuộn qua!

để sửa chữa là ở đây bên dưới

if($(window).scrollTop() + $(window).height() >= $(document).height()){ 

để mã đổi bây giờ trông như

jQuery(document).ready(function(){ 
    $ = jQuery; 
     $(window).scroll(function(){ 
      if ($('.iosSlider').is(':visible')) 
      { 
       if($(window).scrollTop() + $(window).height() >= $(document).height()) 
       { 
       $.get('/our-work/fakework.php', function(data) { 
       $('#mobile-thumbs').append(data); 
       }); 
       } 
      } 
     }); 
}); 

và nó hiện đang làm việc như một nét duyên dáng!

Answer 2

Tôi gặp vấn đề tương tự. Đoạn mã hoạt động tốt trên máy tính để bàn nhưng không hoạt động trên các thiết bị di động iOS. Sau khi thay thế document bằng body sự cố đã được khắc phục. Ngoài ra, nó tốt hơn để kiểm tra xem bạn đang ở gần dưới cùng của màn hình:

if($(window).scrollTop() + $(window).height() > $('body').height() - 200) 

Answer 3

Hoàn toàn làm việc multibrowser và multidevice tương thích với giải pháp:

function getDocumentHeight() { 
return Math.max(
    Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 
    Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), 
    Math.max(document.body.clientHeight, document.documentElement.clientHeight) 
); 
} 

Và sau đó .. ..

$(window).scroll(function() { 
    var docHeight = getDocumentHeight(); 
    if($(window).scrollTop() + window.innerHeight == docHeight) 
       { 
         // enter your code here 
       } 
     }); 

Đừng quên về viewport meta quá:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">