Wie wird ein Div nach unten verschoben, wenn HTML-Inhalt über jquery angehängt wird, aber die Bildlaufleiste ausgeblendet wird?

Question

Unten habe ich einen kleinen js-basierten Simulator für verschiedene Befehlstools. Der Benutzer gibt einen Befehl ein, und wenn er korrekt ist, wird er oben angezeigt. Für zukünftige Anwendungen muss ich sicherstellen, dass es so viele Befehle wie benötigt vor dem Abschluss der Simulation verarbeiten kann. Das bedeutet zwangsläufig, dass der Inhalt überfüllt ist.

Meine Lösung stellte jetzt den Y-Überlauf auf auto, Hinzufügen der Bildlaufleiste und eine kleine jQuery, um den Client ständig an den unteren Rand des Ausgabe-Div zu scrollen, weil der Inhalt unter dem vorherigen Inhalt jeweils angefügt wird Zeit, die ein Benutzer den richtigen Befehl eingibt.

Im Moment funktioniert das gut, außer ich möchte die Bildlaufleiste entfernen. Ich würde mir wünschen, dass sich der Inhalt genauso verhält, wie das bei Überlauf automatisch der Fall wäre, außer ohne eine sichtbare Bildlaufleiste.

Gibt es eine Weise, die ich dies mit Jquery oder Javascript tun könnte?

Ich weiß, dass ich einige CSS-Tricks machen kann, um eine Art von Schwarz über die Bildlaufleiste mit einem Z-Index zu setzen, aber ich möchte das, wenn möglich, vermeiden.

Answer 1

Alles, was Sie brauchen, ist overflow: hidden zu Ihrem Container hinzufügen und navigieren Sie einmal Inhalt geladen wird:

div.scrollTop = div.scrollHeight; 

Demo http://jsfiddle.net/nT75k/2/

Answer 2

Ja, können Sie einen Ereignis-Listener hinzufügen und wenn das Ereignis ausgesendet ist, können Sie es auf den Boden nach unten scrollen, um die Höhe wie so Überprüfung

$container = $('.container'); 
$container[0].scrollTop = $container[0].scrollHeight; 

$('.input').keypress(function (e) { 
    if (e.which == 13) { 
    $container = $('.container'); 
    $container.append('<p class="row">' + e.target.value + '</p>'); 
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow"); 
    } 
}); 

http://jsfiddle.net/w2qbe/

Answer 3

Weiter Javascript verwenden zu mach das Scrollen und lege das div, das deinen Simulator enthält, in ein anderes div, das etwas weniger breit ist und einen Overflow hat, der auf dem äußeren div versteckt ist. Ich habe diese Technik ein paar Mal benutzt und es macht Spaß.

Das einzige, worauf Sie achten sollten, ist, dass die Bildlaufleisten in verschiedenen Browsern leicht unterschiedliche Breiten haben, seien Sie also vorsichtig.

zum Beispiel:

html:

<div id="outside"> 
    <div id="inside"> 
     <div>more content 1</div> 
     <div>more content 2</div> 
     <div>more content 3</div> 
     <div>more content 4</div> 
     <div>more content 5</div> 
     <div>more content 6</div> 
     <div>more content 7</div> 
     <div>more content 8</div> 
     <div>more content 9</div> 
     <div>more content 8</div> 
     <div>more content 7</div> 
     <div>more content 6</div> 
     <div>more content 5</div> 
     <div>more content 4</div> 
     <div>more content 3</div> 
     <div>more content 2</div> 
     <div>more content 1</div> 
    </div> 
</div> 

css:

div#outside { 
    width: 120px; 
    height: 100px; 
    overflow: hidden; 
} 

div#inside { 
    width: 135px; 
    height: 100px; 
    overflow-y: auto; 
} 

Schauen Sie sich diese Geige ->http://jsfiddle.net/5bkz5/1/ < - und blättern Sie über den Text nach unten!

Answer 4

div.scrollTop = div.scrollHeight;

aber Sie nicht overflow: hidden brauchen.