it-swarm.com.de

Wie kann ein div nach unten gescrollt werden, da HTML-Inhalt über jquery an ihn angehängt wird, aber die Bildlaufleiste ausblenden?

Im Folgenden habe ich einen kleinen js-basierten Simulator für verschiedene Befehlstools. Der Benutzer gibt einen Befehl ein. Wenn er richtig ist, wird er oben angezeigt. Für zukünftige Anwendungen muss ich sicherstellen, dass vor dem Abschluss der Simulation so viele Befehle verarbeitet werden können, wie erforderlich sind. Dies bedeutet zwangsläufig, dass der Inhalt überläuft.

Meine Lösung bestand nun darin, den Y-Überlauf auf automatisch zu setzen, die Bildlaufleiste hinzuzufügen und ein wenig Jquery, damit der Client immer am unteren Rand des Ausgabedivs blättert, da der Inhalt bei jeder Eingabe eines Benutzers unterhalb des vorherigen Inhalts angehängt wird der richtige Befehl.

Im Moment funktioniert das gut, außer ich möchte die Bildlaufleiste entfernen. Ich möchte, dass sich der Inhalt auf die gleiche Weise verhält, in der sich der Überlauf automatisch verhält, und zwar ohne sichtbare Bildlaufleiste.

enter image description here

Gibt es eine Möglichkeit, dies mit jquery oder Javascript zu tun?

Ich weiß, dass ich ein paar CSS-Tricks ausführen kann, um mit einem Z-Index eine Art Schwarz über die Bildlaufleiste zu legen, aber ich möchte das möglichst vermeiden.

14
Eric

Sie müssen lediglich overflow: hidden zu Ihrem Container hinzufügen und nach dem Laden des Inhalts einen Bildlauf durchführen:

div.scrollTop = div.scrollHeight;

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

30
dfsq

Ja, Sie können einen Ereignis-Listener hinzufügen. Wenn dieses Ereignis ausgegeben wird, können Sie es nach unten scrollen lassen, indem Sie die Höhe überprüfen

$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/

9
Josh Bedo

Verwenden Sie weiterhin Javascript, um das Scrollen durchzuführen, und fügen Sie das Div, das Ihren Simulator enthält, in ein anderes Div ein, das etwas weniger breit ist. Ich habe diese Technik ein paar Mal angewendet, und es macht ziemlich viel Spaß.

Das einzige, worauf Sie achten sollten, ist, dass die Bildlaufleisten in den verschiedenen Browsern leicht unterschiedlich sind. 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 an -> http://jsfiddle.net/5bkz5/1/ <- und scrollen Sie über den Text!

3
Andbdrew

div.scrollTop = div.scrollHeight;

overflow: hidden brauchen Sie jedoch nicht.

0