JQuery Detect Scroll ở dưới cùng

Question

Tôi muốn đạt được tải nội dung khi người dùng cuộn xuống cuối trang.

Tôi đang gặp sự cố. Nó hoạt động tốt trên các trình duyệt máy tính để bàn nhưng không hoạt động trên thiết bị di động. Tôi đã thực hiện một sửa chữa bẩn để làm cho nó hoạt động trên iPhone, nhưng không phải là tối ưu vì nó sẽ không hoạt động trên các thiết bị di động có kích thước khác.

website của tôi là www.cristianrgreco.com, cuộn xuống để xem hiệu quả trong hành động

Vấn đề là thêm cuộn và chiều cao không bằng với chiều cao trên các thiết bị di động, trong khi họ làm trên các trình duyệt máy tính để bàn.

Có cách nào để phát hiện cho trình duyệt trên thiết bị di động không?

Xin cảm ơn trước.

Dưới đây là đoạn code hiện đang được sử dụng:

$(document).ready(function() { 
     $(".main").hide().filter(":lt(3)").show(); 
     if ($(document).height() == $(window).height()) { 
      // Populate screen with content 
     } 
     else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
      window.onscroll = function() { 
       if ($(document).height() - $(window).scrollTop() <= 1278) { 
        // At the moment only works on iPhone 
       } 
      } 
     } 
     else { 
      $(window).scroll(function() { 
       if ($(window).scrollTop() + $(window).height() >= $(document).height()) {      
        // Works perfect for desktop browsers 
       } 
      }) 
     } 
}) 

Answer 1

Đối với bất cứ ai trông đây sau, tôi giải quyết điều này bằng cách thêm height=device-height cho thẻ meta viewport:

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

Bạn có thể sau đó tiếp tục sử dụng $(document).scroll(function(){});

Điều này đã hoạt động với iOS 5

.210

Answer 2

Bạn đã thêm thẻ meta cho iphones mà thiết lập kích thước nội dung vào khung nhìn của điện thoại?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

EDIT:

Vì vậy, tôi đã cố gắng này trên điện thoại của tôi (android, bánh gừng) và vấn đề này không phải là quá nhiều mã không làm việc nó được nội dung hiển thị không buộc trang để di chuyển. Ngay sau khi tôi phóng to và cuộn xuống nhiều nội dung được tải động hơn. Bạn có thể thử thêm nội dung cho đến khi nội dung được thêm lớn hơn $ (cửa sổ) .height();

Answer 3

Bullet cách chứng minh để có được chiều cao tài liệu trên tất cả các trình duyệt:

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

Answer 4

bạn cũng có thể sử dụng một cuộn Plugin vô tận: https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

Tôi đang sử dụng các cuộn vô tận và nó hoạt động tốt trên máy tính xách tay và iphone của tôi

Answer 5

Nếu bạn có thể, bạn thực sự nên tránh cố gắng để đạt được một con số chính xác.

Sử dụng chức năng Stelok của trên, bạn có thể kiểm tra như thế này:

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) { 

Đó là một chút nhẹ nhàng hơn - người dùng có thể không hoàn toàn cuộn để pixel cuối cùng chính xác nhưng nghĩ rằng anh/cô ấy là ở phía dưới.

Answer 6

Dưới đây là tổng hợp các câu trả lời khác hoạt động rất tốt đối với tôi. Nó có thể được viết như một plugin jQuery đôi khi.

// Handles scrolling past the window up or down to refresh or load more data. 
var scrolledPastTop = false; 
var scrolledPastBottom = false; 
var scrollPrevious = 0; 

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

function bottomScrollRefresh(callback) { 
    var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight(); 
    if(!scrolledPastBottom && pastBottom) { 
    callback($window.height() + $window.scrollTop()); 
    scrolledPastBottom = true; 
    } else { 
    if(!pastBottom) scrolledPastBottom = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

function topScrollRefresh(callback) { 
    var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0; 
    if(!scrolledPastTop && pastTop) { 
    callback($window.scrollTop()); 
    scrolledPastTop = true; 
    } else { 
    if(!pastTop) scrolledPastTop = false; 
    } 
    scrollPrevious = $window.scrollTop(); 
} 

Để sử dụng điều này trong mã của bạn, thêm một cái gì đó như thế này:

window.onscroll = function() { 
    topScrollRefresh(function(pos) { 
     console.log("Loading top. " + pos); 
    }); 
    bottomScrollRefresh(function(pos) { 
    console.log("Loading bottom. " + pos); 
    }); 
}; 

Các công trình lớn cho ứng dụng PhoneGap/Cordova tôi.

Answer 7

Một cải thiện jQuery phiên bản mã

var scrollRefresh = { 
    pastTop: false, 
    pastBottom: false, 
    previous: 0, 
    bottom: function(callback) { 
     var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height(); 
     if(!this.pastBottom && pBottom) { 
     callback($(window).height() + $(window).scrollTop()); 
     this.pastBottom = true; 
     } else { 
     if(!pBottom) this.pastBottom = false; 
     } 
     this.previous = $(window).scrollTop(); 
    }, 
    top: function(callback) { 
     var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0; 
     if(!this.pastTop && pTop) { 
     callback($(window).scrollTop()); 
     this.pastTop = true; 
     } else { 
     if(!pTop) this.pastTop = false; 
     } 
     this.previous = $(window).scrollTop(); 
    } 
    } 

    $(window).scroll(function() { 
    scrollRefresh.top(function(pos) { 
     console.log("Loading top. " + pos); 
     alert("scrolled to top"); //You should delete this line 
    }); 
    scrollRefresh.bottom(function(pos) { 
     console.log("Loading bottom. " + pos); 
     alert("scrolled to bottom"); //You should delete this line 
    }); 
    }); 

Answer 8

Đây là những gì làm việc cho tôi:

(window.innerHeight + window.scrollY) == $(document).height() 

Tìm thấy ở đây: Javascript: How to detect if browser window is scrolled to bottom?

Answer 9

Sử dụng jquery và Strelok của getDocumentHeight() bên dưới (cheers!) Tôi thấy những điều sau đây hoạt động khá tốt. Thử nghiệm cho sự bình đẳng không làm việc cho tôi như iPhone chỉ đăng ký một giá trị cuộn vào cuối của slide mà là thực sự lớn hơn chiều cao tài liệu:

$(window).scroll(function() { 
    var docHeight = getDocumentHeight();   
    if ($(window).scrollTop() + $(window).height() >= docHeight) { 
    // Do stuff 
    } 
}); 

Answer 10

Mặc dù câu hỏi được hỏi 5 năm trước đây, vẫn còn đó là phù hợp hơn trong bối cảnh UI/UX ngày nay. Và tôi muốn thêm hai xu của tôi.

var element = document.getElementById('flux'); 
if (element.scrollHeight - element.scrollTop === element.clientHeight) 
{ 
    // element is at the end of its scroll, load more content 
} 

Nguồn: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled