Проверьте, прокрутил ли пользователь до дна

Question

Я делаю систему нумерации страниц (вроде как Facebook), где контент загружается, когда пользователь прокручивает страницу до конца.Я полагаю, что лучший способ сделать это - найти пользователя внизу страницы и выполнить ajax-запрос для загрузки большего количества сообщений.

Единственная проблема - я не знаю, как проверить,пользователь прокрутил страницу вниз с помощью jQuery.Есть идеи?

Мне нужно найти способ проверить, когда пользователь прокрутил страницу вниз с помощью jQuery.

Answer 1

Пожалуйста, отметьте этот ответ

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

Вы можете сделать footerHeight - document.body.offsetHeight, чтобы увидеть, находитесь ли вы рядом с нижним колонтитулом или достигли нижнего колонтитула

Answer 2

Чистый JS с кроссбраузерным и отладкой (Довольно хорошо производительность )

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

Демо: http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeight не написано мной

Я просто покажу, как это работает, И как я буду это делать

Answer 3

Ник отвечает нормально, но у вас будут функции, которые повторяются при прокрутке или не будут работать вообще, если окно пользователя увеличено. Я придумал простое решение по математике вокруг первой высоты, и оно работает так, как и предполагалось.

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

Answer 4

Попробуйте это для условия совпадения, если прокрутить до нижнего конца

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

    //code for your custom logic

}

Answer 5

Вы можете попробовать следующий код,

$("#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');
    }
});

Answer 6

Мое решение в простой js:

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>

Answer 7

Все эти решения не работают для меня в Firefox и Chrome, поэтому я использую пользовательские функции из Miles O'Keefe и meder omuraliev , например:

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

Answer 8

Это дает точные результаты при проверке прокручиваемого элемента (т.е. не window):

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

offsetHeight должен давать фактическую видимую высоту элемента (включая отступы, поля, и полосы прокрутки), а scrollHeight - это вся высота элемента, включая невидимые (переполненные) области.

jQuery .outerHeight() должен дать результат, аналогичный JS .offsetHeight - документация в MDN для offsetHeight неясно о его кросс-браузерной поддержке. Чтобы охватить больше вариантов, это более полно:

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

Answer 9

Я использовал @ddanone answerear и добавил Ajax call.

$('#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();
    }
}

}

Answer 10

Позвольте мне показать подход без JQuery. Простая функция JS:

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

Краткий пример того, как его использовать:

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