Jak ustawić pasek przewijania Textarea na dół jako domyślny?

97

Mam obszar tekstowy, który jest dynamicznie ponownie ładowany, gdy dane wejściowe użytkownika są wysyłane. Odświeża się co kilka sekund. Gdy ilość tekstu w tym obszarze tekstowym przekracza rozmiar obszaru tekstowego, pojawia się pasek przewijania. Jednak pasek przewijania nie jest naprawdę użyteczny, ponieważ jeśli zaczniesz przewijać w dół, kilka sekund później obszar tekstu odświeża się i przenosi pasek przewijania z powrotem na górę. Chcę ustawić pasek przewijania tak, aby domyślnie pokazywał tekst na dole. Czy ktoś ma pomysł, jak to zrobić?

javascript css scroll textarea moesef
źródło
Możliwy duplikat Jak mieć obszar
LoganMzz

Odpowiedzi:

190

całkiem proste, w waniliowym javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Will P.
źródło
Jeśli właśnie załadowałeś obszar tekstowy w tym samym bloku kodu, to nie działa. Aby działał poprawnie, umieść ten kod w osobnej funkcji, a następnie wywołaj go po załadowaniu nowej wartości textarea. Wtedy będzie działać zgodnie z oczekiwaniami.
blissweb
55

Możesz tego użyć z jQuery

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});
Mahfud Harun
źródło
niezbyt zaznajomiony z jQuery. czy po prostu umieściłbym to w tym samym obszarze co javascript, czy muszę utworzyć nowy element <script> i określić nowy typ?
moesef
1
i dodaj tagi <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > :)
Will P.,
8
Dodanie zależności całej witryny tylko po to, aby zrobić coś, co można zrobić w zwykłym JS, wydaje się złym pomysłem. To, że możesz, nie oznacza, że ​​powinieneś.
emix
0

Miałem ten sam problem i odkryłem, że nie ma atrybutu, który można początkowo ustawić, aby uzyskać prawidłowe zachowanie przewijania. Jednak po zaktualizowaniu tekstu w obszarze textArea, bezpośrednio po tej samej funkcji można ustawić fokus () na tekstArea, aby przewinął do dołu. Następnie możesz wywołać focus()również inne pole wejściowe, aby umożliwić użytkownikowi wprowadzanie danych w tym polu. To działa jak urok:

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
źródło
0

W swoim kodzie HTML ...

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

W Twoim 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>

Odkryłem, że po załadowaniu nowej wartości do obszaru tekstowego musisz umieścić kod, aby ustawić scrollHeight w osobnej funkcji.

blissweb
źródło