Jquery бесконечная прокрутка - с div, а не полосой прокрутки тела

Предположим, у меня есть div, и я хочу извлечь данные и вставить данные в этот div. Когда пользователь прокручивает внутри div, следующий набор данных будет выбран и вставлен в div. Как определить положение полосы прокрутки с помощью jQuery? Я не хочу использовать какой-либо плагин. Мне нужен код JQuery. Вот пример ссылки, такой как ahttp: //www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html, но он использовал плагин.

Ответы на вопрос(3)

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

Наслаждайтесь!

Коби

$(document).ready(function () {
        $("div").scroll(function () {
            var $this = $(this);
            var height = this.scrollHeight - $this.height(); // Get the height of the div
            var scroll = $this.scrollTop(); // Get the vertical scroll position

            var isScrolledToEnd = (scroll >= height);

            $(".scroll-pos").text(scroll);
            $(".scroll-height").text(height);

            if (isScrolledToEnd) {
                var additionalContent = GetMoreContent(); // Get the additional content

                $this.append(additionalContent); // Append the additional content

            }
        });
    });

В соответствии с вашим комментарием, вот весь исходный код HTML-страницы, который работает (протестировано в IE 9):

** Пожалуйста, убедитесь, что вы ссылаетесь на библиотеку jquery **

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image</title>
        <script src="assets/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("div").scroll(function () {
                    var $this = $(this);
                    var height = this.scrollHeight - $this.height(); // Get the height of the div
                    var scroll = $this.scrollTop(); // Get the vertical scroll position

                    var isScrolledToEnd = (scroll >= height);

                    $(".scroll-pos").text(scroll);
                    $(".scroll-height").text(height);

                    if (isScrolledToEnd) {
                        var additionalContent = GetMoreContent(); // Get the additional content

                        $this.append(additionalContent); // Append the additional content

                    }
                });
            });

            function GetMoreContent() {
                return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
            }
        </script>
    </head>
        <body>
            <div style="overflow: scroll;height: 150px; border: 1px solid red;">
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
            </div> 

            Scroll Height: <span class="scroll-height"></span>   <br/>
            Scroll position: <span class="scroll-pos"></span>   
        </body>
    </html>
Решение Вопроса

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

Это добавит новый элемент в контейнер главной страницы, когда полоса прокрутки достигнет нижней части страницы. Он также заполняет этот новый элемент содержимым, загруженным из внешнего скрипта.

Если вы хотите определить, прокрутил ли пользователь до конца определенный элемент div:

$('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});
 13 февр. 2015 г., 15:15
Лучше получить его на 75% прокрутки Math.round ($ (this) .scrollTop () + $ (this) .innerHeight ()) == $ (this) [0] .scrollHeight
 06 нояб. 2014 г., 17:55
@hohner - Почти идеально! ;) У меня есть небольшая модификация для этого второго блока. Для див сoverflow-y:auto, у меня работала следующая логика:$(this).scrollTop() === ($(this)[0].scrollHeight - $(this).innerHeight()).
 Thomas09 апр. 2012 г., 13:35
почему вы пишете эту строку как $ (this) [0] .scrollHeight, почему не $ (this) .scrollHeight. почему ты пишешь здесь, как массив. Пожалуйста, упомяните. Спасибо
 06 янв. 2014 г., 03:57
@Thomas, это обозначение в скобках, используемое здесь для доступа к нулевому свойству объекта jQuery $ (this). Объекты jQuery похожи на массивы, поэтому вы можете зависеть от согласованности первого свойства. В этом случае это ссылка на узел DOM, обернутый объектом jQuery. Это быстрое сокращение.

.scrollTop() ваше оружие выбора.API jQuery

Get the current vertical position of the scroll bar for the first element in the set of matched elements.

Поэтому убедитесь, что привязали его к нужному элементу. , что непосредственно на div должен работать.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Поэтому, вероятно, вы должны найти способ рассчитать высоту элемента div, как если бы он был растянут без полосы прокрутки, чтобы поместить их в числа в значимом отношении к съемке события загрузки.

Ваш ответ на вопрос