Визначення, коли користувач прокручує до основи діви за допомогою jQuery

У мене є поле "div" (зване флюсом) із змінною кількістю вмісту всередині. Цей розділ для переповнення встановлений для автоматичного.

Тепер, що я намагаюся зробити, це те, що коли прокрутка використовується до нижньої частини цього поля DIV, завантажує більше вмісту на сторінку, я знаю, як це зробити (завантажувати вміст), але я не знаю, як це зробити виявити, коли користувач прокрутив до нижньої частини тегу div? Якби я хотів зробити це для всієї сторінки, я б взяв .scrollTop і відніс це з .height.

Але я не можу зробити це тут?

Я спробував взяти .scrollTop з флюсу, а потім загортати весь вміст у div, який називається внутрішнім, але якщо я візьму внутрішній Висота флюсу, він повертає 564 пікселів (div встановлюється на 500 як висота) та висоту "innner" він повертає 1064, а вершина прокрутки, коли внизу діва написано 564.

Що я можу зробити?

Є деякі властивості / методи, якими ви можете скористатися:

$().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/

Редагувати: я оновив "прив'язувати" до "увімкнено" відповідно до:

Як і в jQuery 1.7, метод .on () є кращим методом прикріплення обробників подій до документа.

Я знайшов рішення, яке, коли ви прокручуєте вікно та кінець діва, показаного знизу, дає вам попередження.

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

У цьому прикладі, якщо ви прокрутите вниз, коли div ( .posts) закінчить його, ви отримаєте сповіщення.

Хоча це питання було задано 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_scroll

Деякі елементи не дозволять вам прокручувати повну висоту елемента. У цих випадках ви можете використовувати:

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

Просто додаткова примітка, коли я це знайшов, шукаючи рішення для фіксованого діва, який я хочу прокрутити. Для мого сценарію я виявив, що краще враховувати прокладку на діві, щоб я міг точно вдаритись до кінця. Так що розширюючись на відповідь @ 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');
    }
  });

Це дасть вам точне розташування, включаючи прокладки та бордюри

це працювало для мене, хоча

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

Якщо вам потрібно скористатися цим вмістом у div, який має overflow-y як прихований або прокручуйте, щось подібне може бути те, що вам потрібно.

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

Я виявив, що стеля потрібна, тому що підсилювач scrollHeight здається округлим, або, можливо, якась інша причина, що призводить до того, що це вимкнено менш ніж на 1.

Якщо ви не використовуєте функцію Math.round (), запропоноване рішення Dr.Molle, не працюватиме в деяких випадках, коли вікно браузера має масштаб.

Наприклад, $ (this) .scrollTop () + $ (this) .innerHeight () = 600

$ (це) [0] .scrollВисока врожайність = 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');
        }
    })
});

За допомогою простого використання DOM ви можете перевірити стан

element.scrollTop + element.clientHeight == element.scrollHeight

якщо правда, то ви досягли кінця.

Якщо хтось отримує scrollHeightяк undefined, то виберіть елементи 1-ї субелементи:mob_top_menu[0].scrollHeight

не впевнений, чи це якась допомога, але я це роблю.

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

З повагою

<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>

Хоча це задавали майже 6 років, тому ще актуальна тема UX-дизайну, ось демонстраційний фрагмент, якщо хтось із новачків хотів використовувати

$(function() {

  /* this is only for demonstration purpose */
  var t = $('.posts').html(),
    c = 1,
    scroll_enabled = true;

  function load_ajax() {

    /* call ajax here... on success enable scroll  */
    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);

    /*again enable loading on scroll... */
    scroll_enabled = true;

  }


  $(window).bind('scroll', function() {
    if (scroll_enabled) {

      /* if 90% scrolled */
    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {

        /* load ajax content */
        scroll_enabled = false;  
        load_ajax();
      }

    }

  });

});

h4 {
  color: red;
  font-size: 36px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>

Хлопці, це рішення проблеми масштабування, воно працює з усіма масштабами, якщо вам це потрібно:

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

$(window).on("scroll", function() {
    //get height of the (browser) window aka viewport
    var scrollHeight = $(document).height();
    // get height of the document 
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // code to run when scroll to bottom of the page
    }
});

Це код на github.

Ось ще одна версія.

Ключовим кодом є функція scroller (), яка приймає введення як висота діва, що містить розділ прокрутки, використовуючи overflow: scroll. Він наближається до 5 пікселів зверху або 10 пікселів знизу, як у верхній чи нижній частині. Інакше це занадто чутливо. Здається, 10px - це приблизно мінімум. Ви побачите, що додає 10 до висоти Div, щоб отримати нижню висоту. Я припускаю, що 5px може спрацювати, я не проходив тест. YMMV. scrollHeight повертає висоту внутрішньої області прокрутки, а не відображену висоту діва, яка в цьому випадку становить 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>';

?>