javascript: обнаружить конец прокрутки

Question

У меня есть слой div с overflow, установленный на scroll.

Когда прокручивается до нижней части div, я хочу запустить функцию.

Answer 1

Принятый ответ был в корне ошибочным, с тех пор он был удален. Правильный ответ:

function scrolled(e) { 
    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) { 
    scrolledToBottom(e); 
    } 
} 

Протестировано в Firefox, Chrome и Opera. Оно работает.

Answer 2

Я не мог получить ни один из приведенных выше ответов, чтобы работать, поэтому вот третий вариант, который работает для меня! (Используется с jQuery)

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) { 
    //do stuff 
} 

Надеюсь, это поможет любому!

Answer 3

Это работает для меня:

$(window).scroll(function() { 
    buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0 
    if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer) { 
    doThing(); 
    } 
}); 

должны использовать JQuery 1.6 или выше

Answer 4

я нашел альтернативу, которая работает.

Ни один из этих ответов не работал для меня (в настоящее время тестируется в FireFox 22.0), и после многих исследований я нашел, как представляется, гораздо более чистое и прямое решение.

Реализовано решение:

function IsScrollbarAtBottom() { 
    var documentHeight = $(document).height(); 
    var scrollDifference = $(window).height() + $(window).scrollTop(); 
    return (documentHeight == scrollDifference); 
} 

Ресурс: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

С уважением

Answer 5

OK Вот хороший и правильное решение

Поступил вызов Div с id="myDiv"

поэтому функция g OES.

function GetScrollerEndPoint() 
{ 
    var scrollHeight = $("#myDiv").prop('scrollHeight'); 
    var divHeight = $("#myDiv").height(); 
    var scrollerEndPoint = scrollHeight - divHeight; 

    var divScrollerTop = $("#myDiv").scrollTop(); 
    if(divScrollerTop === scrollerEndPoint) 
    { 
     //Your Code 
     //The Div scroller has reached the bottom 
    } 
} 

Answer 6

Взгляните на этот пример: MDN Element.scrollHeight

Я рекомендую почитать этот пример: stackoverflow.com/a/24815216..., который реализует обработку для действия прокрутки кросс-браузер.

Вы можете использовать следующий фрагмент кода:

//attaches the "scroll" event 
$(window).scroll(function (e) { 
    var target = e.currentTarget, 
     scrollTop = target.scrollTop || window.pageYOffset, 
     scrollHeight = target.scrollHeight || document.body.scrollHeight; 
    if (scrollHeight - scrollTop === $(target).innerHeight()) { 
     console.log("► End of scroll"); 
    } 
}); 

Answer 7

Поскольку innerHeight не работает в некоторых старых версиях IE, clientHeight могут быть использованы:

$(window).scroll(function (e){ 
    var body = document.body;  
    //alert (body.clientHeight); 
    var scrollTop = this.pageYOffset || body.scrollTop; 
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) { 
     loadMoreNews(); 
    } 
}); 

Answer 8

Я создал решение, основанное на событии на основе Бьорн Типлинг:

(function(doc){ 
    'use strict'; 

    window.onscroll = function (event) { 
     if (isEndOfElement(doc.body)){ 
      sendNewEvent('end-of-page-reached'); 
     } 
    }; 

    function isEndOfElement(element){ 
     //visible height + pixel scrolled = total height 
     return element.offsetHeight + element.scrollTop >= element.scrollHeight; 
    } 

    function sendNewEvent(eventName){ 
     var event = doc.createEvent('Event'); 
     event.initEvent(eventName, true, true); 
     doc.dispatchEvent(event); 
    } 
}(document)); 

И вы используете канун нт, как это:

document.addEventListener('end-of-page-reached', function(){ 
    console.log('you reached the end of the page'); 
}); 

BTW: вам нужно добавить этот CSS для JavaScript, чтобы знать, как долго страница

html, body { 
    height: 100%; 
} 

Демо: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview