Ermitteln, wann der Benutzer mit jQuery zum unteren Rand von div blättert

Ich habe eine Lösung gefunden, die Ihnen beim Durchscrollen Ihres Fensters und des Endes eines Div.

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

Wenn Sie in diesem Beispiel nach unten scrollen, wenn div (.posts) beendet ist, erhalten Sie eine Warnung.

Obwohl die Frage vor 5,5 Jahren gestellt wurde, ist sie im heutigen UI/UX-Kontext mehr als relevant. Und ich möchte meine zwei Cents hinzufügen.

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

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Bei einigen Elementen können Sie nicht die gesamte Höhe des Elements scrollen. In diesen Fällen können Sie Folgendes verwenden:

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

Nur eine zusätzliche Anmerkung, da ich dies gefunden habe, als ich nach einer Lösung für ein festes Div suchte, das ich scrollen möchte. Für mein Szenario habe ich festgestellt, dass es besser ist, die Auffüllung des Div zu berücksichtigen, damit ich das Ende genau erreichen kann. Ich erweitere die Antwort von @ Dr.Molle und füge folgendes hinzu

$('#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');
    }
  });

Das gibt Ihnen die genaue Position, einschließlich Polsterung und Grenzen

das hat aber für mich funktioniert

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

Wenn Sie die Math.round () - Funktion nicht verwenden, funktioniert die Lösung vorgeschlagen von Dr.Molle in einigen Fällen nicht, wenn ein Browserfenster einen Zoom aufweist.

Zum Beispiel $ (This) .scrollTop () + $ (this) .innerHeight () = 600 

$ (this) [0] .scrollHeight ergibt 599,99998 

600> = 599.99998 schlägt fehl.

Hier ist der richtige Code:

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

Sie können auch einige zusätzliche Randpixel hinzufügen, wenn Sie keine strikte Bedingung benötigen

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');
        }
    })
});

Wenn jemand scrollHeight als undefined erhält, wählen Sie das erste Unterelement der Elemente aus: mob_top_menu[0].scrollHeight

Wenn Sie dies für ein div mit überlauf-y als ausgeblendet oder als Bildlauf verwenden müssen, ist dies möglicherweise das, was Sie brauchen.

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

Ich fand, dass Ceil gebraucht wurde, weil Proper ScrollHeight rund zu sein scheint, oder vielleicht aus einem anderen Grund, weshalb dieser Wert um weniger als 1 gesunken ist.

ich bin mir nicht sicher, ob es Hilfe gibt, aber so mache ich es.

Ich habe ein Indexfeld, das größer als das Fenster ist, und ich lasse es scrollen, bis das Ende dieses Index erreicht ist. Dann fixiere ich es in Position. Der Vorgang wird umgekehrt, sobald Sie zum oberen Rand der Seite blättern.

Grüße.

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

Obwohl dies vor fast 6 Jahren vor immer noch heißem Thema im UX-Design gefragt wurde, ist hier ein Demo-Ausschnitt, wenn ein Neuling verwendet werden wollte

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

Jungs, das ist die Lösung für das Zoomproblem. Es funktioniert mit allen Zoomstufen, falls Sie es brauchen:

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
    }
});

Dies ist der Code auf Github.