Wie finde ich den Pixelwert des unteren Teils eines Elements (div)

Question

Wie kann ich den Pixelwert des unteren Randes eines Elements ermitteln. z.B. die #posts div. Ich möchte eine unendliche Scroller erstellen. und dies ist so, dass ich erkennen kann, wenn der Benutzer in der Nähe / am unteren Rand der #posts erreicht hat und ich möchte neue Beiträge zu laden, wenn ja.

aktualisieren:

Ich schätze, 1 Option ist die Verwendung von

$("#header").height() + $("#posts").height()

aber ich möchte den Code generisch zu machen. so vielleicht kann ich diese Funktionalität in ein Plugin zu konvertieren. der Code oben wird nicht berücksichtigt haben, Padding, Ränder, alle Elemente oben #posts etc.

Answer 1

var div = $('#posts');
var bottom = div.offset().top + div.height();

Answer 2

Hätten Sie eine <div> innerhalb von #posts mit dem eigentlichen Inhalt zu verknüpfen, würden Sie etwa so vorgehen:

$("#posts").scroll(function() {
  if($(this).scrollTop() == ($("#posts_content").outerHeight() - $(this).height())) {
    alert("Reached Bottom!");
  }
});

Hier können Sie eine Demo ausprobieren . Nach einer .scroll() Ereignis, überprüfen wir .scrollTop() der #pages div, um zu sehen, wie weit es nach unten gescrollt ist. Wenn das gleich dem Wert des inneren Divs ist .outerHeight() abzüglich der .height() de #pages (porque .scrollTop() gibt die top Position), dann wird ein Alarm ausgelöst.

Sie können hier natürlich alles laden, was Sie brauchen, wenn Sie wollen, dass es lädt antes de ganz unten, ändern Sie einfach die == a >= und klatschen eine -40 oder etwas auf der rechten Seite, um 40 Pixel von unten zu laden. Etwa so :

$("#posts").scroll(function() {
  if($(this).scrollTop() >= ($("#posts_content").outerHeight() - $(this).height() - 40)) {
    alert("Reached Bottom!");
  }
});