Come mantenere un div scostato verso il basso mentre il contenuto HTML viene aggiunto ad esso tramite jquery, ma nascondere la barra di scorrimento?

Question

Di seguito ho un piccolo simulatore basato su js per diversi strumenti di comando. L'utente inserisce un comando e, se è corretto, lo visualizza in alto. Per gli usi futuri, ho bisogno di assicurarmi che possa gestire tutti i comandi necessari prima di completare la simulazione. Ciò significa che inevitabilmente avrò un contenuto traboccante.

La mia soluzione ora era impostare l'overflow Y su auto, aggiungendo la barra di scorrimento e un po 'di jquery per mantenere il client sempre in fondo al div dell'output in ogni momento, perché il contenuto viene aggiunto al di sotto del contenuto precedente ogni tempo che un utente inserisce il comando corretto.

In questo momento funziona correttamente, tranne che mi piacerebbe rimuovere la barra di scorrimento. Mi piacerebbe che il contenuto si comporti nello stesso modo in cui l'auto-bilanciamento farebbe e agisce, tranne che senza una barra di scorrimento visibile.

C'è un modo ho potuto fare questo con jQuery o JavaScript?

So che posso fare alcuni trucchi CSS per mettere una sorta di nero sulla barra di scorrimento con uno z-index, ma vorrei evitarlo, se possibile.

Answer 1

Tutto ciò che serve è aggiungere overflow: hidden al vostro contenitore e scorrere una volta il contenuto viene caricato:

div.scrollTop = div.scrollHeight; 

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

Answer 2

Sì, è possibile aggiungere un listener di eventi e quando questo evento viene emesso si può avere scorrere verso il basso controllando l'altezza in questo modo

$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

Continuare a utilizzare javascript per fai lo scrolling e metti il ​​div contenente il tuo simulatore all'interno di un altro div che è leggermente meno largo e fai overflow nascosto sul div esterno. Ho usato questa tecnica un paio di volte, ed è piuttosto divertente.

L'unica cosa che dovresti fare attenzione è che le barre di scorrimento hanno larghezze leggermente diverse nei vari browser, quindi fai attenzione.

ad esempio:

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; 
} 

Dai un'occhiata a questo violino ->http://jsfiddle.net/5bkz5/1/ < - e scorrere verso il basso sul testo!

Answer 4

div.scrollTop = div.scrollHeight;

ma non avete bisogno overflow: hidden.