Kiểm tra xem người dùng đã cuộn xuống phía dưới chưa

Tôi đang tạo một hệ thống phân trang (giống như Facebook) nơi tải nội dung khi người dùng cuộn xuống phía dưới. Tôi tưởng tượng cách tốt nhất để làm điều đó là tìm khi người dùng ở cuối trang và chạy truy vấn ajax để tải thêm bài đăng.

Vấn đề duy nhất là tôi không biết cách kiểm tra xem người dùng đã cuộn xuống cuối trang bằng jQuery chưa. Có ý kiến ​​gì không?

Tôi cần tìm cách kiểm tra khi người dùng đã cuộn xuống cuối trang bằng jQuery.

Sử dụng .scroll()sự kiện trên window, như thế này:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Bạn có thể kiểm tra nó ở đây , cái này sẽ cuộn cuộn trên cùng của cửa sổ, vì vậy nó cuộn xuống bao nhiêu, thêm chiều cao của cửa sổ hiển thị và kiểm tra xem nó có bằng chiều cao của nội dung tổng thể không ( document). Thay vào đó, nếu bạn muốn kiểm tra xem người dùng có ở gần đáy không, nó sẽ trông giống như thế này:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Bạn có thể kiểm tra phiên bản đó tại đây , chỉ cần điều chỉnh nó 100thành bất kỳ pixel nào từ dưới cùng mà bạn muốn kích hoạt.

Câu trả lời của Nick Craver hoạt động tốt, giải quyết vấn đề giá trị $(document).height()thay đổi theo trình duyệt.

Để làm cho nó hoạt động trên tất cả các trình duyệt, hãy sử dụng chức năng này từ James Padolsey :

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

thay cho $(document).height(), để mã cuối cùng là:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Tôi không chắc chắn tại sao điều này chưa được đăng, nhưng theo tài liệu từ MDN , cách đơn giản nhất là sử dụng các thuộc tính javascript gốc:

element.scrollHeight - element.scrollTop === element.clientHeight

Trả về true khi bạn ở dưới cùng của bất kỳ phần tử có thể cuộn nào. Vì vậy, chỉ cần sử dụng javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightcó ủng hộ rộng rãi trong các trình duyệt, từ tức là 8 được chính xác hơn, trong khi clientHeightvà scrollTopđều được hỗ trợ bởi tất cả mọi người. Ngay cả tức là 6. Đây phải là trình duyệt chéo an toàn.

Đối với những người sử dụng giải pháp của Nick và nhận được các cảnh báo / sự kiện lặp đi lặp lại, bạn có thể thêm một dòng mã phía trên ví dụ cảnh báo:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Điều này có nghĩa là mã sẽ chỉ kích hoạt lần đầu tiên bạn ở trong phạm vi 100px dưới cùng của tài liệu. Nó sẽ không lặp lại nếu bạn cuộn ngược lên rồi lại xuống, điều này có thể hữu ích hoặc không hữu ích tùy thuộc vào việc bạn đang sử dụng mã của Nick để làm gì.

Ngoài câu trả lời được chấp nhận tuyệt vời từ Nick Craver, bạn có thể điều chỉnh sự kiện cuộn để nó không được kích hoạt thường xuyên do đó làm tăng hiệu suất trình duyệt :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Câu trả lời của Nick Craver cần được sửa đổi một chút để hoạt động trên iOS 6 Safari Mobile và nên:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Thay đổi $ (window) .height () để window.innerHeight nên được thực hiện bởi vì khi thanh địa chỉ được giấu thêm 60px được thêm vào chiều cao của cửa sổ nhưng sử dụng $(window).height()không không phản ánh sự thay đổi này, trong khi sử dụng window.innerHeightthực hiện.

Lưu ý : window.innerHeightThuộc tính cũng bao gồm chiều cao của thanh cuộn ngang (nếu được hiển thị), không giống như $(window).height()chiều cao sẽ không bao gồm chiều cao của thanh cuộn ngang. Đây không phải là vấn đề trong Mobile Safari, nhưng có thể gây ra hành vi không mong muốn trong các trình duyệt khác hoặc các phiên bản tương lai của Mobile Safari. Thay đổi ==để >=có thể khắc phục điều này cho hầu hết các trường hợp sử dụng phổ biến.

Tìm hiểu thêm về window.innerHeighttài sản ở đây

Đây là một cách tiếp cận khá đơn giản

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Thí dụ

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

Trường hợp elmlà một phần tử lấy từ tức là document.getElementById.

Đây là một đoạn mã sẽ giúp bạn gỡ lỗi mã của mình, tôi đã kiểm tra các câu trả lời ở trên và thấy chúng bị lỗi. Tôi đã kiểm tra các nội dung sau trên Chrome, IE, Firefox, IPad (Safari). Tôi không có bất kỳ người nào khác được cài đặt để kiểm tra ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Có thể có một giải pháp đơn giản hơn, nhưng tôi đã dừng lại ở thời điểm CNTT LÀM VIỆC

Nếu bạn vẫn gặp sự cố với một số trình duyệt giả mạo, đây là một số mã giúp bạn gỡ lỗi:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Tôi hy vọng điều này sẽ tiết kiệm một số thời gian.

Vui lòng kiểm tra câu trả lời này

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Bạn có thể làm footerHeight - document.body.offsetHeightđể xem nếu bạn đang ở gần chân trang hoặc đạt đến chân trang

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Nó tính toán thanh cuộn khoảng cách đến dưới cùng của phần tử. Bằng 0, nếu thanh cuộn đã chạm đáy.

Đây là hai xu của tôi:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Pure JS với trình duyệt chéo và gỡ lỗi ( Hiệu suất khá tốt )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Bản trình diễn: http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeightkhông được viết bởi tôi

Tôi chỉ cho thấy cách thức hoạt động của nó, và tôi sẽ làm như thế nào

Giải pháp của tôi trong js đồng bằng:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Hãy thử điều này cho điều kiện khớp nếu cuộn xuống cuối cùng

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick trả lời tốt, nhưng bạn sẽ có các chức năng lặp lại chính nó trong khi cuộn hoặc hoàn toàn không hoạt động nếu người dùng có cửa sổ phóng to. Tôi đã đưa ra một sửa chữa dễ dàng chỉ là math.round chiều cao đầu tiên và nó hoạt động đúng như giả định.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Bạn có thể thử đoạn mã sau

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Điều này cho kết quả chính xác, khi kiểm tra phần tử có thể cuộn (nghĩa là không window):

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightphải đưa ra chiều cao có thể nhìn thấy thực tế của một phần tử (bao gồm phần đệm, lề và thanh cuộn) và scrollHeightlà toàn bộ chiều cao của phần tử bao gồm các vùng vô hình (tràn).

jQueryCác .outerHeight()kết quả tương tự với JS .offsetHeight- tài liệu trong MDN cho offsetHeightkhông rõ ràng về hỗ trợ trình duyệt chéo của nó. Để bao gồm nhiều tùy chọn hơn, điều này là đầy đủ hơn:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Tất cả các giải pháp này không hoạt động với tôi trên Firefox và Chrome, vì vậy tôi sử dụng các chức năng tùy chỉnh từ Miles O'Keefe và meder omulariev như thế này:

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Đây là hai xu của tôi vì câu trả lời được chấp nhận không có tác dụng với tôi.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Thay vì nghe sự kiện cuộn, sử dụng Intersection Observer là cách rẻ tiền để kiểm tra xem phần tử cuối cùng có thể nhìn thấy trên khung nhìn hay không (điều đó có nghĩa là người dùng đã được cuộn xuống phía dưới). Nó cũng hỗ trợ cho IE7 với polyfill .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Hãy để tôi hiển thị phê duyệt mà không có JQuery. Hàm JS đơn giản:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Ví dụ ngắn về cách sử dụng nó:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Tôi đã sử dụng @ddanone trả lời và thêm cuộc gọi Ajax.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Để dừng cảnh báo lặp đi lặp lại câu trả lời của Nick

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Google Chrome cung cấp chiều cao đầy đủ của trang nếu bạn gọi $(window).height()

Thay vào đó, sử dụng window.innerHeightđể lấy chiều cao của cửa sổ của bạn. Kiểm tra cần thiết phải là:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Rõ ràng thứ làm việc cho tôi là 'cơ thể' chứ không phải 'cửa sổ' như thế này:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

để sử dụng tương thích trình duyệt chéo:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

và sau đó thay vì $ (tài liệu) .height () gọi hàm getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

để sử dụng gần đáy:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });