¿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?

javascript css scroll textarea Moesef
fuente
Posible duplicado de Cómo tener un área de texto para mantener el desplazamiento hacia la parte inferior cuando se actualice
LoganMzz

Respuestas:

190

bastante simple, en javascript vainilla:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Will P.
fuente
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);
});
Mahfud Harun
fuente
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();
}
Mitesh Raval
fuente
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.

blissweb
fuente