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

668

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

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

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

Джонни
источник
Забавно, я пытаюсь выяснить, какая функция вызывается при прокрутке вниз, так что я могу заблокировать эту ужасную «функцию».
эндолит
Для решения React.js эта ссылка может помочь: stackoverflow.com/a/53158893/4265546
raksheetbhat

Ответы:

1024

Используйте .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для любого пикселя снизу, на котором вы хотите запустить.

Ник Крейвер
источник
32
Как обычно, ты доберешься до меня. В любом случае, для OP, если у вас есть контейнер постов, используйте его идентификатор вместо «окна», также вы можете изменить последний .height () на scrollHeight
Christian
4
Firefox вызывает предупреждение («снизу!»); много раз (отлично работает с хромом и сафари)
Марко Матарацци
3
это немного глючит, если console.log()вместо предупреждения сделать это, иногда повторяется команда.
Юрген Павел
19
@KevinVella Vella хорошая комбинация - использовать это с _.debounce () в утилите подчеркивания, чтобы предотвратить его запуск до тех пор, пока пользователь не перестанет прокручивать - underscorejs.org/#debounce -
JohnnyFaldo
3
@NickCraver есть ли чистая js-реализация?
Dewsworld
116

Ответ Ника Крейвера работает отлично, избавьте от проблемы, которая $(document).height()зависит от браузера.

Чтобы он работал во всех браузерах, используйте эту функцию от Джеймса Падолси :

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!");
       }
   });
Майлз О'Киф
источник
6
Он обновил немного сжатую версию функции 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); }
Дрю
который предупреждает меня, когда я достигаю вершины, а не низа (Chrome).
Дэмиен Роше
Может быть лучше использовать minвместо max, особенно если в любом случае есть запас, чтобы избежать случайного предотвращения перехода пользователя к тому, что, по вашему мнению, является нижней частью страницы.
Соломон Уцко
104

Я не совсем уверен, почему это еще не было опубликовано, но согласно документации из MDN , самый простой способ - использовать нативные свойства javascript:

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

Возвращает true, когда вы находитесь в нижней части любого прокручиваемого элемента. Так что просто с помощью 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. Это должно быть кросс-браузерным.

Феликс Ганьон-Гренье
источник
1
Обратите внимание, что в некоторых ситуациях это может быть не так. Firefox 47 сообщает textarea clientHeight как 239, в то время как вышеприведенное уравнение дает 253 при прокрутке вниз. Может быть, отступы / границы или что-то на это влияет? В любом случае, добавление комнаты для маневра не повредит var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Это полезно для автоматической прокрутки поля, только если оно уже внизу (поэтому пользователь может вручную просмотреть определенную часть журнала в реальном времени, не теряя своего места и т. Д.).
Бежор
Я хотел бы добавить, что он может возвращать ложные отрицания, поскольку одна сторона может вернуть небольшое десятичное число, а другая сторона возвращает целое число (например, 200.181819304947и 200). Я добавил, Math.floor()чтобы помочь справиться с этим, но я не знаю, насколько это будет надежно.
Ханна
1
Для меня это не работает кросс-браузер. Я получаю совершенно разные результаты на Chrome по сравнению с Firefox.
Тадей
1
Я пробовал это на элементе <body>, и это срабатывает, когда браузер прокручивается вверх, а не вниз.
Крис Соболевски
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(замените 3.0 на любой пиксельный допуск, который вы считаете подходящим для ваших обстоятельств). Это путь, потому что (A) clientHeight, scrollTopи clientHeightвсе они округлены, что может привести к ошибке 3px, если все выровнять, (B) 3 пикселя вряд ли видны пользователю, поэтому пользователь может подумать, что что-то не так с вашим сайтом когда они «думают», они находятся внизу страницы, хотя на самом деле это не так, и (C) некоторые устройства (особенно устройства без мыши) могут иметь странное поведение при прокрутке.
Джек Гиффин,
50

Для тех, кто использует решение Ника и получает повторные оповещения / срабатывание событий, вы можете добавить строку кода над примером оповещения:

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

Это означает, что код будет срабатывать только в первый раз, когда вы окажетесь в пределах 100 пикселей от нижней части документа. Это не повторится, если вы прокрутите назад вверх, а затем назад вниз, что может или не может быть полезным в зависимости от того, для чего вы используете код Ника.

Тим Карр
источник
1
Я бы просто прокомментировал и сказал, где эта строка кода, поскольку она имеет отношение к чьему-либо ответу, но +1 для намерения!
Нейт-Уилкинс
Извините, я не мог (и все еще не могу) увидеть, как добавить комментарий к ответу (как я могу здесь)?
Тим Карр
Да, новые пользователи не могут добавлять комментарии к сообщениям, если вы не получили больше репутации.
Нейт-Уилкинс,
Вне первого, если вы можете поставить другое, если это проверяет, существует ли изменение, которое вы хотели сделать в скрипте, скажем, класс был применен к div. Это сделает второй вложенным, если он не будет запущен, если он уже запущен.
1934286
Как я могу выбрать конкретный идентификатор Div вместо всего окна?
Джеймс Смит
40

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

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);
}
Джордж Филиппакос
источник
Вероятно, следует указать, что для этого требуется Underscore.js: underscorejs.org . Это очень хороший момент, хотя. Событие прокрутки должно быть практически всегда ограничено, чтобы избежать серьезных проблем с производительностью.
Джуд Осборн
Может быть, это только я, и он мог бы использовать некоторые тесты, но мне не нравится идея вызывать clearTimeout и setTimeout для каждого события прокрутки. Я бы выдал 1 setTimeout и добавил бы несколько охранников в этот обработчик. Это, вероятно, просто микрооптимизация (если вообще).
Гримаса Отчаяния
Это действительно аккуратное дополнение! Я могу придумать еще одно улучшение. В настоящее время функция, которая проверяет высоту, не будет работать, если пользователь продолжает прокручивать. Если это проблема (например, вы хотите вызвать функцию, когда пользователь прокручивает ее на полпути вниз, независимо от того, продолжает ли она прокручивать), вы можете легко убедиться, что функция действительно вызывается, и в то же время запрещается несколько вызовов в течение выбранного интервала. Вот суть, чтобы показать это. gist.github.com/datacarl/7029558
datacarl
Какая? Вызвать груз техники, чтобы предотвратить простой расчет? Я не вижу, как это более эффективно
Rambatino
37

Ответ Ника Крейвера должен быть слегка изменен для работы на 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недвижимости здесь

Йоси
источник
window.innerHeight имеет больше смысла за то, что я пытался достичь, спасибо!
Amir5000
Как получить оставшуюся высоту после прокрутки?
ОПВ
21

Вот довольно простой подход

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.

Фредерик Витте
источник
17

Вот фрагмент кода, который поможет вам отладить ваш код, я проверил приведенные выше ответы и обнаружил, что они содержат ошибки. Я протестировал следующее на 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;">

Я надеюсь, что это сэкономит кому-то время.

коготь
источник
Лучший ответ для Vanilla JS, нет решения JQuery. Использованиеvar docElement = document.documentElement; var winElement = window
jperelli
Это в 2019 году. Вместо winElement.pageYOffsetвас также можно использовать winElement.scrollY.
Ноэль Абрахамс
15

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

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

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

Джунаид Кадир
источник
12
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Он рассчитывает расстояние полосы прокрутки до нижней части элемента. Равен 0, если полоса прокрутки достигла дна.

Василий Гутник
источник
1
Я сделал следующее и работал без нареканий. Спасибо. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
Jiminssy
11

Это мои два цента:

$('#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');
        }
    });
ddanone
источник
Попробовал использовать ваше решение, оно работает нормально, но в тех случаях, когда у элемента есть отступы - это не работает, потому что он вычисляет чистую высоту элемента без учета отступов, чтобы решить эту проблему, я изменил это $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Тарас Черната
6

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

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

l2aelba
источник
Отлично. Проверено в Firefox и Chrome
Эрлисар Васкес
Я получаю следующую ошибку: Ожидается 3 аргумента, но получено 2. Аргумент 'c' не предоставлен.
Sõber
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>

Бакос бенс
источник
4

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

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

    //code for your custom logic

}
Хирен Патель
источник
3

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

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}
Флорин андрей
источник
3

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

$("#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');
    }
});
Шахрух Анвар
источник
2

Это дает точные результаты при проверке прокручиваемого элемента (т.е. нет 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
}
Юваль А.
источник
попробуйте Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightв случае, если scrollTop является десятичным числом, без которого он не будет работатьMath.floor()
Михаил Михайлидис
2

Вместо прослушивания события прокрутки, использование 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>

StefansArya
источник
Проблема с Intersection Observer заключается в том, что если начальное окно является относительно небольшим (скажем, базовое расположение перед извлечением изображений без полосы прокрутки), обратный вызов наблюдателя запускается немедленно. Слушатель прокрутки на самом деле ждет человека, чтобы прокрутить. И полоса прокрутки не появится до того, как будет получена первая партия изображений и т. Д. Так что Intersection Observer не все в одном решении.
Алекс
@Aleks Вы можете вызывать .observe(...)прослушиватель событий, например, когда пользователь наводит / трогает ваш контейнер прокрутки, чтобы он не запускался немедленно.
StefansArya
1

Все эти решения не работают для меня в 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!");
    }
});
hayj
источник
1

Вот мои два цента, поскольку принятый ответ не работал для меня.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;
Винс Пануччо
источник
0

Позвольте мне показать подход без 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";  }
Алексей Забабурин
источник
5
Это не отвечает на вопрос. Вопрос состоял в том, как определить, что пользователи прокручивали окно до самого дна. Ваш код проверяет, находится ли конкретный элемент в поле зрения.
Питер Холл
0

Я использовал @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();
    }
}

}

Энрике К.
источник
0

Чтобы остановить повторное оповещение об ответе Ника

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}
Арун Прасад Е.С.
источник
0

Google Chrome дает полную высоту страницы, если вы звоните $(window).height()

Вместо этого используйте window.innerHeightдля получения высоты вашего окна. Необходимая проверка должна быть:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}
alierdogan7
источник
0

Очевидно, что для меня работало «тело», а не «окно», как это:

$('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
 }
 });
GeniusGeek
источник