jQuery mit .html & dann window.scrollTo

Ich mache folgendes:jQuery mit .html & dann window.scrollTo

Zuerst HTML-Code in die Seite injizieren (viel), die dann erhöht sich die Fenster Scrollbalken:

$("#XXXX").html("LOTS OF HTML").show();

i Dann möchte bis zum Ende der Seite scrollen:

window.scrollTo(0,$(document).height());

Problem ist, dass die Seite nie nach unten scrollt. Ich habe eine console.logging gemacht und scrollTo läuft, bevor der HTML-Code von inject html() ausgeführt wird. Ich probierte das in der JS, die den HTML injiziert, ich versuchte dann, die Rolle innerhalb der HTML-Einspritzung zu tun, aber das machte keinen Unterschied.

Irgendwelche Ideen?

Quelle

2011-01-11 AnApprentice

Ist die Injektion innerhalb eines AJAX-Anrufs? Sie können es entweder aufrufen, nachdem Sie injiziert haben, oder den Bildlauf in ein 'setTimeout (...)' setzen und dem Browser Zeit geben, um aufzuholen. –

Die Injektion ist in einem AJAX-Anruf. Ich möchte setTimeout vermeiden, das ist ein Hack, der immer Probleme auf der Straße verursacht. – AnApprentice

Wenn nur .html() einen Rückruf hatte! Ich bin ziemlich ratlos, aber ich werde darüber nachdenken. –

Hier ist etwas zu versuchen:

 
$.ajax({ 
     //other params 
     //params 
     success: function(data) { 
      $("#XXXX").html(data).show(); 
     } 
     complete: function() { 
      window.scrollTo(0,$(document).height()); 
     } 
    });

Die Erfolgsfunktion ausgeführt wird, wenn der Aufruf erfolgreich ist, und die komplette Funktion läuft danach, so dass es funktionieren kann!

Hier ist die jQuery docs on .ajax()

Quelle

2011-01-11 23:48:29

das hat es getan, danke – AnApprentice

Das '' '' windows.scrollTo ''in' 'success'' Handler ist ausreichend. 'html' ist eine blockierende Funktion, wie' show', wenn sie ohne Parameter aufgerufen wird, so dass 'scrollTo' erst aufgerufen wird, wenn sie ausgeführt wurden. – lonesomeday

Als Alternative, hier ist ein anderer Ansatz (in-Fall, dass jemand anderes es will). Ich habe jQuery erweitert, um eine "ScrollToBottom" -Funktion hinzuzufügen. Sie können dies in eine Append/HTML/Text-Funktion einfügen und werden danach aufgerufen.

Das Setup:

;(function($){ 
    $.fn.extend({ 
     scrollToBottom: function(){ 
      window.scrollTo(0,$(document).height()); 
      return this; // allow chaining 
     } 
    }); 
    // alias in case you want to call it individually 
    $.scrollToBottom = $(document).scrollToBottom(); 
})(jQuery);

Die Ausführung:

<head> 
    $(function(){ 
     var data = ''; 
     for (var d = 0; d < 255; d++) 
      data += '<p>Hello, world from me!</p>'; 

     $('#demo').html(data).scrollToBottom(); 
    }); 
</head> 
<body> 
    <div id="demo"></div> 
</body>

Das Ergebnis: jsFiddle

EDIT Added ein Alias, damit es auf seine eigene aufgerufen werden.

Quelle

2011-01-11 23:55:25

Ich bin nicht davon überzeugt, dass es sinnvoll ist, dies als '$ .fn.scrollToBottom' zu definieren, da es keine semantische Verbindung zum ausgewählten Element gibt (ich würde es als' $ .scrollToBottom' implementieren), aber +1 für einige nette Code. – lonesomeday

@lonesomeday: Du hast absolut recht, es gibt keinen Grund dafür - abgesehen davon, dass es in-line aufgerufen werden darf. Lassen Sie die anderen Funktionen angerufen werden, rufen Sie dann die Bildlaufleiste auf (macht auch das (IMHO) Calling einfacher, wenn Sie eine schöne Kette haben) –

jQuery mit .html & dann window.scrollTo

Antwort

Verwandte Themen