Обнаружение, когда пользователь прокручивает дно div с помощью jQuery

Ответ 1

Есть некоторые свойства/методы, которые вы можете использовать:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

Итак, вы можете взять сумму первых двух свойств, и когда она равна последнему свойству, вы достигли конца:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

Изменить: я обновил 'bind' до 'on' в соответствии с:

Как и в jQuery 1.7, метод .on() является предпочтительным методом привязки обработчиков событий к документу.

Ответ 2

Я нашел решение, которое, когда вы прокручиваете свое окно и заканчиваете div, показанный снизу, дает вам предупреждение.

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

В этом примере, если вы прокрутите вниз, когда div (.posts) закончите, вы получите предупреждение.

Ответ 3

Просто обратите внимание на это, когда я нашел это при поиске решения для фиксированного div, который я хочу прокрутить. Для моего сценария я обнаружил, что его предпочтительнее учитывать прописку на div, чтобы я мог точно подойти к концу. Поэтому, расширяя ответ @Dr.Molle, я добавляю следующие

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

Это даст вам точное местоположение, включая отступы и границы.

Ответ 4

Хотя вопрос был задан 5,5 лет назад, он все же более уместен в сегодняшнем контексте UI/UX. И я хотел бы добавить свои два цента.

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Ответ 5

это сработало для меня, хотя

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

Ответ 6

Если кто-то получает scrollHeight как undefined, затем выберите элементы "1-й подэлемент: mob_top_menu[0].scrollHeight

Ответ 7

Если вы не используете функцию Math.round(), решение предлагаемое Dr.Molle, не будет работать в некоторых случаях, когда окно браузера имеет масштабирование.

Например $ (this).scrollTop() + $(this).innerHeight() = 600

$(this) [0].scrollHeight yields = 599.99998

600 >= 599.99998 не работает.

Вот правильный код:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

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

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

Ответ 8

не уверен, что это какая-то помощь, но я это делаю.

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

С уважением.

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>

Ответ 9

Если вам нужно использовать это в div, который имеет overflow-y как скрытый или прокручиваемый, что-то вроде этого может быть тем, что вам нужно.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

Я обнаружил, что для этого необходим потолок, потому что prop scrollHeight кажется круглым, или, возможно, другой причиной, по которой это отключено менее чем на 1.

Ответ 10

Ребята, это решение проблемы масштабирования, оно работает со всеми уровнями масштабирования, если вам это нужно:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }

Ответ 11

Здесь другая версия.

key code - это скроллер функций(), который принимает входные данные как высоту div, содержащую секцию прокрутки, с использованием переполнения: прокрутка. Он приблизительно 5px сверху или 10px снизу, как сверху или снизу. В противном случае это слишком чувствительно. Кажется, что 10px - это минимум. Вы увидите, что добавляет 10 к высоте div, чтобы получить нижнюю высоту. Я предполагаю, что 5px может работать, я не тестировал экстенсивно. YMMV. scrollHeight возвращает высоту внутренней области прокрутки, а не отображаемую высоту div, которая в этом случае составляет 400 пикселей.

<?php

$scrolling_area_height=400;
echo '
<script type="text/javascript">
          function scroller(ourheight) {
            var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
            if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
                alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
            }
            if (ourtop <= (5)) {
                alert(\'Reached the top\');
            }
          }
</script>

<style type="text/css">
.scroller { 
            display:block;
            float:left;
            top:10px;
            left:10px;
            height:'.$scrolling_area_height.';
            border:1px solid red;
            width:200px;
            overflow:scroll; 
        }
</style>

$content="your content here";

<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
        scroller(ourheight);"
        >'.$content.'
</div>';

?>