jQuery - scroll(function....

[toetschi]

Hallo zusammen,

das oben gepastete habe ich derzeit als Code in der "Mache".
Seit mittlerweile drei Stunden bastle ich an der scroll(funtion... rum.

Ziel ist es Daten automatisch nachzuladen wenn man im Div-Layer "wrapper" bis zum boden scrollt. In Firebug funtionieren die if-abfragen etc.

Könnt ihr mir einen Tipp geben wieso das Script trotzdem nicht macht was es soll?
Vielen Dank

 

[CPoly]

Hier mal ein fiddle mit meinem debugging Plugin (https://github.com/Prinzhorn/jquery-inlog) integriert: http://jsfiddle.net/nDWpv/

Wenn du in die Konsole guckst, siehst du während dem scrollen folgende Ausgabe:

scrollTop() ? 57
height() ? 200
scrollTop() ? 114
height() ? 200
scrollTop() ? 171
height() ? 200
scrollTop() ? 228
height() ? 200
scrollTop() ? 342
height() ? 200
scrollTop() ? 399
height() ? 200
scrollTop() ? 513
height() ? 200
scrollTop() ? 684
height() ? 200
scrollTop() ? 741
height() ? 200
scrollTop() ? 1026
height() ? 200
scrollTop() ? 1083
height() ? 200
scrollTop() ? 1311
height() ? 200
scrollTop() ? 1368
height() ? 200
scrollTop() ? 1425
height() ? 200
scrollTop() ? 1482
height() ? 200
scrollTop() ? 1804
height() ? 200

Also ist "height" offensichtlich die falsche Wahl.

Die Lösung scheint nicht ganz trivial:

Passt zu deinem Vorhaben: http://forrst.com/posts/Detect_scroll_at_bottom_with_jQuery_Endless_scr-hEA

http://stackoverflow.com/questions/...om-of-scroll-doesnt-work-only-detects-the-top
http://stackoverflow.com/questions/3962558/javascript-detect-scroll-end

EDIT: https://github.com/fredwu/jquery-endless-scroll

 

[toetschi]

Ja ... nur ich verstehe nicht wieso die Abfragen in der Konsolte manuell funktionieren.

$('#wrapper').scroll(function(){
	    $.inlog(true);
			//if($('#wrapper').scrollTop() == $('#wrapper')[0].scrollHeight - $('#wrapper').height()) {
			if($('#wrapper')[0].scrollHeight - $('#wrapper').scrollTop() <= $('#wrapper').outerHeight() + 20) {
				alert("lol");
		    	$('div#loadmoreajaxloader').show();
				$.ajax({
					url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
					success: function(html){
						if(html){
							$("#postswrapper").append(html);
							$('div#loadmoreajaxloader').hide();
						}else{
							$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
						}
					}
				});
		    }
		});

if.... (Berechnung) funktioniert immer auf manueller Basis. Aber nicht automatisiert im Skript...
Ich versteh das nicht

Kannst mir noch einen Tipp geben damit ichs raffe?


Danke

 

[CPoly]

if.... (Berechnung) funktioniert immer auf manueller Basis. Aber nicht automatisiert im Skript...

Was meinst du mit "manuell"? Kannst du mal ein Beispiel auf jsfiddle erstellen und dann erklären, wann es funktioniert und wann nicht?

 

[toetschi]

Wenn ich auf meiner Seite, wenn der Code geladen ist in der Firebug Konsole den "if" Teil ausführe, also:

if($('#wrapper')[0].scrollHeight - $('#wrapper').scrollTop() <= $('#wrapper').outerHeight() + 20) {
alert("lol");
}

Geht die Alert-Box.

 

[CPoly]

Bei dem Fiddle, dass du mir geschickt hast, kommt das alert sobald ich nach unten gescrollt hab. Also scheint dort das Problem nicht reproduzierbar zu sein.

Und bei dir kommt es beim Scrollen nicht, aber wenn du es manuell in die Konsole eingibst schon?