Làm cách nào để đặt thanh cuộn textarea xuống dưới cùng làm mặc định?

Tôi có một vùng văn bản đang được tải lại động khi dữ liệu nhập của người dùng đang được gửi đến. Nó tự làm mới mỗi vài giây. Khi lượng văn bản trong vùng văn bản này vượt quá kích thước của vùng văn bản, một thanh cuộn sẽ xuất hiện. Tuy nhiên, thanh cuộn không thực sự có thể sử dụng được vì nếu bạn bắt đầu cuộn xuống, một vài giây sau vùng văn bản sẽ làm mới và đưa thanh cuộn ngay lên trên cùng. Tôi muốn đặt thanh cuộn theo mặc định hiển thị phần lớn văn bản dưới cùng. Bất cứ ai có một ý tưởng về cách làm như vậy?

khá đơn giản, trong javascript vani:

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

Bạn có thể sử dụng điều này với jQuery

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

Tôi đã gặp vấn đề tương tự và phát hiện ra rằng không có thuộc tính nào có thể được đặt ban đầu để có được hành vi cuộn phù hợp. Tuy nhiên, khi văn bản được cập nhật trong textArea, ngay sau khi trong cùng một hàm, bạn có thể đặt tiêu điểm () thành textArea để làm cho nó cuộn xuống dưới cùng. Sau đó, bạn cũng có thể gọi focus()một số trường nhập khác để cho phép người dùng nhập vào trường đó. Điều này hoạt động giống như sự quyến rũ:

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

Trong HTML của bạn ...

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

Trong Javascript của bạn ...

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

Tôi nhận thấy rằng bạn cần đặt mã để đặt scrollHeight thành một chức năng riêng biệt sau khi tải giá trị mới vào vùng văn bản.