javascript - posicion - mostrar y ocultar div con el mismo boton jquery

¿Cómo mantener un div desplazado hacia abajo como contenido HTML anexado a través de jquery, pero ocultar la barra de desplazamiento?

Question

A continuación tengo un pequeño simulador basado en js para diferentes herramientas de comando. El usuario ingresa un comando y, si es correcto, lo muestra en la parte superior. Para usos futuros, necesito asegurarme de que pueda manejar tantos comandos como sea necesario antes de completar la simulación. Esto significa que inevitablemente tendré desbordamiento de contenido.

Mi solución ahora era configurar el desbordamiento Y en automático, agregar la barra de desplazamiento y un pequeño jquery para mantener al cliente desplazado al final del div de salida en todo momento, porque el contenido se agrega debajo del contenido anterior cada vez que un usuario ingresa el comando correcto.

En este momento, esto funciona bien, excepto que me gustaría eliminar la barra de desplazamiento. Me gustaría que el contenido se comporte de la misma manera en que el desbordamiento automático lo haría y lo hace, excepto sin una barra de desplazamiento visible.

¿Hay alguna manera de que pueda hacer esto con jquery o javascript?

Sé que puedo hacer algunos trucos de CSS para poner un poco de negro sobre la barra de desplazamiento con un índice z, pero me gustaría evitar eso si es posible.

Answer 1

Continúa usando javascript para hacer el desplazamiento, y coloca el div que contiene tu simulador dentro de otro div que sea ligeramente menos ancho y desbordamiento oculto en el div externo. He usado esta técnica un par de veces, y es muy divertido.

Lo único que debe tener cuidado es que las barras de desplazamiento son anchuras ligeramente diferentes en diferentes navegadores, así que tenga cuidado.

por ejemplo:

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

¡Mira este violín -> http://jsfiddle.net/5bkz5/1/ <- y desplázate hacia abajo sobre el texto!

Answer 2

Sí, puede agregar un detector de eventos y, cuando se emita ese evento, puede hacer que se desplace hacia abajo hasta la parte inferior al verificar la altura, como

$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

Todo lo que necesita es agregar overflow: hidden a su contenedor y desplazarlo una vez que se haya cargado el contenido:

div.scrollTop = div.scrollHeight;

Demostración http://jsfiddle.net/nT75k/2/

Answer 4

div.scrollTop = div.scrollHeight;

pero no necesitas overflow: hidden .