Перевірте, чи користувач прокрутився донизу

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

Єдина проблема полягає в тому, що я не знаю, як перевірити, чи користувач прокрутив до основи сторінки за допомогою jQuery. Будь-які ідеї?

Мені потрібно знайти спосіб перевірити, коли користувач прокручує jQuery донизу сторінки внизу сторінки.

Використовуйте .scroll()подію window, наприклад:

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

Ви можете протестувати його тут , для цього потрібне прокручування вікна, тому скільки воно прокручується вниз, додає висоту видимого вікна і перевіряє, чи дорівнює це висоті загального вмісту ( document). Якщо ви хочете , щоб замість того, щоб перевірити , якщо користувач знаходиться поруч з нижньої, було б виглядати приблизно так:

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

Ви можете протестувати цю версію тут , просто налаштуйте її 100на будь-який піксель знизу, на який ви хочете запустити.

Відповідь Ніка Крейвера працює чудово, не шкодуючи питання, яке значення $(document).height()залежить від браузера.

Щоб він працював у всіх браузерах, використовуйте цю функцію від 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
    );
}

замість $(document).height(), так що остаточний код:

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

Я не точно впевнений, чому це ще не було розміщено, але відповідно до документації з MDN , найпростішим способом є використання власних властивостей javascript:

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

Повертає істину, коли ви знаходитесь внизу будь-якого елемента, що прокручується. Тож просто за допомогою JavaScript:

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

scrollHeightмати широку підтримку в браузерах, тобто 8, щоб бути точнішими, clientHeightі scrollTopїх обидва підтримують усі. Навіть тобто 6. Це повинно бути безпечним для браузера.

Для тих, хто використовує рішення Ніка та отримує повторні сповіщення / події, ви можете додати рядок коду над прикладом попередження:

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

Це означає, що код запустить лише перший раз, коли ви знаходитесь у межах 100 пікселів у нижній частині документа. Він не повториться, якщо прокрутити назад, а потім назад вниз, що може бути або не корисно в залежності від того, для чого ви використовуєте код Ніка.

Крім чудового прийнятого відповіді від Ніка Крейвера, ви можете придушити подію прокрутки, щоб вона не запускалася так часто, тим самим збільшуючи продуктивність браузера :

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

Відповідь Ніка Крейвера потрібно трохи змінити для роботи на iOS 6 Safari Mobile і має бути:

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

Зміна $ (вікно) .height () , щоб window.innerHeight має бути зроблено , тому що , коли адресний рядок прихована додаткові 60px додані до висоти вікна , але з використанням $(window).height()зовсім НЕ відображають ці зміни, в той час як з допомогою window.innerHeightробить.

Примітка . window.innerHeightВластивість також включає висоту горизонтальної смуги прокрутки (якщо вона надається), на відміну від $(window).height()якої не буде включати висоту горизонтальної смуги прокрутки. Це не проблема в Mobile Safari, але може спричинити несподівану поведінку в інших браузерах або майбутніх версіях Mobile Safari. Якщо змінити, ==це >=можна виправити для найбільш поширених випадків використання.

Детальніше про window.innerHeightвласність тут

Ось досить простий підхід

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

Приклад

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

Де elmелемент, отриманий з т document.getElementById. Е.

Ось фрагмент коду, який допоможе вам налагодити ваш код, я перевірив вищевказані відповіді та виявив їх помилковими. Я перевіряв наступні дії на Chrome, IE, Firefox, IPad (Safari). У мене немає інших встановлених для тестування ...

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

Можливо, є більш просте рішення, але я зупинився на тій точці, в якій він працював

Якщо у вас все ще виникають проблеми з неправдивим браузером, ось код, який допоможе вам налагодити:

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

Сподіваюся, це врятує когось деякий час.

Перевірте цю відповідь

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

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

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

Він обчислює смугу прокрутки відстані до нижньої частини елемента. Дорівнює 0, якщо смуга прокрутки досягла нижнього.

Це два мої центи:

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

Чистий 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не написано мною

Я просто показую, як її робота, І як я буду робити

Моє рішення в простому 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>

Спробуйте це для умови відповідності, якщо прокрутіть до нижнього кінця

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

    //code for your custom logic

}

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

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

Ви можете спробувати наступний код,

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

Це дає точні результати при перевірці прокручуваного елемента (тобто ні window):

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

offsetHeightмає надати фактичну видиму висоту елемента (включаючи набивання, поле та смуги прокрутки), і scrollHeightце вся висота елемента, включаючи невидимі (переповнені) ділянки.

jQuery«S .outerHeight()повинен дати подібний результат JS - х .offsetHeight- документацію в MDN для offsetHeightнеясна про свою підтримку крос-браузера. Щоб охопити більше варіантів, це більш повно:

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

Усі ці рішення для мене не працюють у Firefox та Chrome, тому я використовую спеціальні функції Майлза О'Кіф та медура Омуралієва, як це:

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

Ось два мої центи, оскільки прийнята відповідь не працювала для мене.

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

Замість того, щоб слухати подію прокрутки, використання Intersection Observer - це найдешевший для перевірки того, чи був останній елемент видимим у вікні перегляду (це означає, що користувач прокрутився донизу). Він також підтримує IE7 з поліфіл .

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>

Дозвольте показати апробацію без 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";  }

Я використовував одяг @ddanone і додав 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();
    }
}

}

Щоб зупинити повторне оповіщення про відповідь Ніка

ScrollActivate();

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

Google Chrome надає повний зріст сторінки, якщо ви телефонуєте $(window).height()

Замість цього використовуйте window.innerHeightдля отримання висоти вашого вікна. Необхідна перевірка повинна бути:

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

Мабуть, для мене працювало "тіло", а не "вікно", як це:

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


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

для використання сумісності між браузерами:

  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

        );
   }

а потім замість $ (document) .height () викликайте функцію getheight ()

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


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

для використання в нижній частині:

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


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