Как установить значение scrollTop для текстовой области? - PullRequest
Новая
       24

Как установить значение scrollTop для текстовой области?

5 голосов
/ 09 марта 2012

Я сталкиваюсь с проблемой при попытке установить значение scrollTop для текстовой области. Мой код JavaScript выглядит следующим образом - 

 var element =  document.getElementById("messageTextArea");
 console.log("scrollTop = "+element.scrollTop);
 console.log("scrollHeight = "+element.scrollHeight);
 element.scrollTop = element.scrollHeight; // doesn't work!

 console.log("The value is-->"+element.scrollTop); // no change!

 element =  document.getElementById("messageTextArea"); 
 console.log("Now scrollTop = "+element.scrollTop);         // no change!
 console.log("Now scrollHeight = "+element.scrollHeight);

Журнал консоли Firefox выдает следующее - 

scrollTop = 0 
scrollHeight = 86
The value is-->0
Now scrollTop = 0  
Now scrollHeight = 86

Что я действительно хочу сделать, так это заставить текстовую область как-то автоматически прокручиваться до максимума, когда текст не помещается в фактическую ширину и высоту, и полоса прокрутки активируется.

Вот два скриншота, объясняющих проблему -

Это то, что у меня сейчас есть -

enter image description here

И это то, что я хотел бы иметь -

enter image description here

Пожалуйста, помогите!

Ответы [ 2 ]

1 голос
/ 09 марта 2012

Хорошо, извините, ребята.Проблема была в том, что я получал неправильную текстовую область.Это так неловко!Теперь это работает. 

  var element =  document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!
0 голосов
/ 29 ноября 2013

Также были проблемы с использованием scrollTop в firefox с textarea, особенно если значение textarea установлено с помощью AJAX.

Это сработало для меня: 

<script>
function scroll_bottom(elm){
    var elm = document.getElementById(elm);
    var bottom = function() {
        elm.scrollTop = elm.scrollHeight;
    };
    setTimeout(bottom, 0);
}
</script>

Затем использовать его, например: 

<textarea id="log" style="width:100%;height:100%;resize:none;"></textarea>

<script>
$(document).ready(function(){
    scroll_bottom('log');
});
</script>
...