web-dev-qa-db-de.com

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

Ich habe eine div-Box (genannt Flux) mit einer variablen Menge an Inhalt. Diese Divbox hat einen Überlauf, der auf auto gesetzt ist.

Was ich jetzt versuche, ist, wenn Sie zum Seitenende dieser DIV-Box scrollen, mehr Inhalt in die Seite laden, ich weiß, wie das geht (lade den Inhalt), aber ich weiß nicht, wie Erkennen, wann der Benutzer bis zum Ende des div-Tags gescrollt wurde? Wenn ich es für die gesamte Seite machen wollte, würde ich .scrollTop nehmen und das von .height abziehen.

Aber ich scheine das hier nicht zu machen?

Ich habe versucht, .scrollTop aus Flux zu nehmen und dann den gesamten Inhalt in ein div namens inner zu packen, aber wenn ich die innerHigh von Flux nehme, gibt es 564px (das div ist auf 500 als Höhe gesetzt) ​​und die Höhe von 'innner'. es gibt 1064 zurück und das Scrolltop, wenn am Ende des div 564 steht.

Was kann ich machen?

196
Eax

Es gibt einige Eigenschaften/Methoden, die Sie verwenden können:

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

Sie können also die Summe der ersten beiden Eigenschaften verwenden, und wenn sie der letzten Eigenschaft entspricht, haben Sie das Ende erreicht:

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

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

Edit: Ich habe 'bind' an 'on' gemäß aktualisiert:

Seit jQuery 1.7 ist die .on () -Methode die bevorzugte Methode, um Event-Handler an ein Dokument anzuhängen.

381
Dr.Molle

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.

40
ehsan Aghaei

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
}
21
Thinking

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

7

das hat aber für mich funktioniert

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

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

1
Starwave

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.

1
Goose

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>
0
Israel Chapa

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>

0
Akshay Hegde

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!
                }
            });
        }
0
Liad Livnat
$(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.

0
aki_sud