У меня есть слой div
с overflow
, установленным на scroll
.
Когда прокручивается в нижней части div
, я хочу запустить функцию.
У меня есть слой div
с overflow
, установленным на scroll
.
Когда прокручивается в нижней части div
, я хочу запустить функцию.
Принятый ответ был в корне ошибочным, с тех пор он был удален. Правильный ответ:
function scrolled(e) {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
scrolledToBottom(e);
}
}
Протестировано в Firefox, Chrome и Opera. Он работает.
Я не мог получить ни один из приведенных выше ответов для работы, поэтому здесь есть третий вариант, который работает для меня! (Это используется с jQuery)
if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
//do stuff
}
Надеюсь, это поможет любому!
OK Вот хорошее и правильное решение
У вас есть Div-вызов с id="myDiv"
поэтому функция идет.
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
}
}
Это сработало для меня:
$(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 или выше
Я нашел альтернативу, которая работает.
Ни один из этих ответов не работал у меня (в настоящее время тестируется в FireFox 22.0), и после многих исследований я нашел, что, кажется, намного более чистое и прямое решение.
Реализованное решение:
function IsScrollbarAtBottom() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollDifference);
}
Привет
Я создал решение на основе событий, основанное на ответе Bjorn Tipling:
(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%;
}
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}
Я тоже искал его, и даже после проверки всех комментариев здесь и более, это решение, чтобы проверить, достигнуто ли дно или нет.
Взгляните на этот пример: MDN Element.scrollHeight
Я рекомендую проверить этот пример: fooobar.com/questions/24939/..., который реализует кросс-браузерную обработку для действие прокрутки.
Вы можете использовать следующий фрагмент:
//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");
}
});
Так как 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();
}
});
На самом деле это будет правильный ответ:
function scrolled(event) {
const container = event.target.body
const {clientHeight, scrollHeight, scrollY: scrollTop} = container
if (clientHeight + scrollY >= scrollHeight) {
scrolledToBottom(event);
}
}
Причиной использования event
являются обновленные данные, если вы будете использовать прямую ссылку на div, вы устареете scrollY
и не сможете правильно определить положение.
дополнительный способ - обернуть его в setTimeout
и дождаться обновления данных.