¿Cómo configuro la barra de desplazamiento del área de texto en la parte inferior como predeterminada?


97

Tengo un área de texto que se recarga dinámicamente a medida que se envía la entrada del usuario. Se actualiza solo cada dos segundos. Cuando la cantidad de texto en este área de texto excede el tamaño del área de texto, aparece una barra de desplazamiento. Sin embargo, la barra de desplazamiento no se puede usar realmente porque si comienza a desplazarse hacia abajo, un par de segundos después, el área de texto se actualiza y hace que la barra de desplazamiento vuelva a la parte superior. Quiero configurar la barra de desplazamiento para que muestre de forma predeterminada la parte inferior del texto. ¿Alguien tiene una idea de cómo hacerlo?


Respuestas:


190

bastante simple, en javascript vainilla:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

Si acaba de cargar el área de texto en el mismo bloque de código, esto no funciona. Para que funcione correctamente, coloque este código en una función separada y luego llámelo después de haber cargado el nuevo valor de área de texto. Entonces funcionará como desee.
Blissweb

55

Puedes usar esto con jQuery

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});

no muy familiarizado con jQuery. ¿Podría poner esto en la misma área que javascript o necesito crear un nuevo elemento <script> y especificar un nuevo tipo?
Moesef

1
y agregue <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > etiquetas :)
Will P.

8
Agregar dependencia en todo el sitio solo para hacer algo que puede hacer en JS simple suena como una mala idea. El hecho de que puedas no significa que debas hacerlo.
emix

0

Tuve el mismo problema y descubrí que no hay ningún atributo que se pueda configurar inicialmente para obtener el comportamiento de desplazamiento correcto. Sin embargo, una vez que el texto se actualiza en el área de texto, inmediatamente después, en la misma función, puede establecer el foco () en el área de texto para que se desplace hacia abajo. Luego puede llamar focus()a algún otro campo de entrada también para permitir que el usuario ingrese en ese campo. Esto funciona a las mil maravillas:

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}

0

En tu HTML ...

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>

En tu Javascript ...

<script language="javascript">

    function loadLog(logValue) {
        logTa = document.getElementById("logTextArea")
        logTa.value = logValue;
        scrollLogToBottom()
    }

    function scrollLogToBottom() {
        logTa = document.getElementById("logTextArea")
        logTa.scrollTop = logTa.scrollHeight;
    }

    loadLog("This is my really long text block from a file ... ")

</script>

Descubrí que necesita poner el código para configurar scrollHeight en una función separada después de cargar el nuevo valor en el área de texto.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.