tải ajax khi cuộn đạt 80%

Question

Tôi đang sử dụng đoạn mã sau đó đang làm việc khi thanh cuộn đạt đến botttom,

if($(window).scrollTop() == $(document).height() - $(window).height()){ 

tuy nhiên tôi muốn rằng ajax là bắn khi tôi đạt 70% cuộn không phải 100.

Answer 1

Cung cấp kiểm tra hiện tại của bạn là bắn khi cuộn xuống dưới của trang, bạn có thể thử một số arithmetics cơ bản:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
              //where 0.7 corresponds to 70% --^ 

Hãy chắc chắn để thêm một tấm séc để không sa thải nhiều yêu cầu Ajax đồng thời, nếu bạn chưa có.

Đây là thay vì ra khỏi phạm vi của câu hỏi, nhưng nếu bạn muốn một ví dụ về làm thế nào để ngăn chặn nhiều yêu cầu từ bị sa thải đồng thời:

Khai báo một var toàn cầu, ví dụ processing.

Sau đó kết hợp nó trong chức năng của bạn:

if (processing) 
    return false; 

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
    processing = true; //sets a processing AJAX request flag 
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc. 
     //load the content to your div 
     processing = false; //resets the ajax flag once the callback concludes 
    }); 
} 

Đó là một ví dụ đơn giản của việc sử dụng một var để theo dõi nếu có một yêu cầu Ajax hoạt động cho chức năng cuộn của bạn hay không, và nó không can thiệp vào bất kỳ yêu cầu Ajax khác mà bạn có thể có.

Edit: JSFiddle example

Xin lưu ý rằng việc sử dụng một% để đo chiều cao tài liệu có thể là một ý tưởng tồi, xem xét rằng chiều cao của tài liệu sẽ tăng lên mỗi khi bạn tải một cái gì đó, làm cho nó kích hoạt các yêu cầu Ajax là tương đối nhiều từ dưới cùng của trang (kích thước tuyệt đối khôn ngoan).

tôi khuyên bạn nên sử dụng một giá trị cố định bù đắp để ngăn chặn điều đó (200-700 hoặc lâu hơn):

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){ 
           // pixels offset from screen bottom --^ 

Ví dụ: JSFiddle

Edit: Để mô phỏng vấn đề trong các mã đầu tiên với tỷ lệ phần trăm, tải 50 div giây vào đó. Khi bạn tải div tiếp theo, nó sẽ chỉ thêm 2% vào tổng chiều cao của tài liệu, có nghĩa là yêu cầu tiếp theo sẽ được kích hoạt ngay sau khi bạn cuộn 2% này trở lại 70% chiều cao của tài liệu. Trong ví dụ cố định của tôi, bù đắp dưới được xác định sẽ chỉ tải nội dung mới khi người dùng ở một phạm vi pixel tuyệt đối được xác định từ cuối màn hình.

Answer 2

Tìm kiếm google nhanh chóng cho get percentage scrolled down trả về this page là kết quả đầu tiên (với mã bên dưới, số tiền ít nhiều sẽ làm những gì bạn muốn). Tôi cảm thấy như bạn đã không thử bất kỳ nghiên cứu nào trước khi hỏi ở đây.

$(document).scroll(function(e){ 

    // grab the scroll amount and the window height 
    var scrollAmount = $(window).scrollTop(); 
    var documentHeight = $(document).height(); 

    // calculate the percentage the user has scrolled down the page 
    var scrollPercent = (scrollAmount/documentHeight) * 100; 

    if(scrollPercent > 50) { 
     // run a function called doSomething 
     doSomething(); 
    } 

    function doSomething() { 

     // do something when a user gets 50% of the way down my page 

    } 

});