I am facing a problem when I try to set the scrollTop value for a textarea. My JavaScript code is as follows -

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

The Firefox console log gives the following -

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

What I really want to do is to make the textarea somehow automatically be scrolled down to the maximum when the text does not fit in the actual width and height and the scroll bar gets activated.

Here's are two screenshots explaining the problem -

This is what I have currently -

And this is what I would like to have -

Please help!

I am facing a problem when I try to set the scrollTop value for a textarea. My JavaScript code is as follows -

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

The Firefox console log gives the following -

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

What I really want to do is to make the textarea somehow automatically be scrolled down to the maximum when the text does not fit in the actual width and height and the scroll bar gets activated.

Here's are two screenshots explaining the problem -

This is what I have currently -

And this is what I would like to have -

Please help!

• javascript
• html
• textarea
• scrollbar

• Have you tried .scrollIntoView? – Dagg Nabbit Commented Mar 8, 2012 at 21:31
• @GGG I tried element.scrollIntoView(false), but it still didn't work. :( – CodeBlue Commented Mar 8, 2012 at 21:36
• it should work if you call it on an element that you append to the bottom of the chat log. – Dagg Nabbit Commented Mar 8, 2012 at 21:44
• That code worked when I tried it locally. Can you demonstrate using a jsFiddle? – Neil Commented Mar 8, 2012 at 21:52

3 Answers 3

Ok, sorry guys. The problem was that I was getting the wrong text area. This is so embarrassing! Now it works.

  var element =  document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!

Also had issues with using scrollTop in firefox with textarea, especially if textarea value is set with AJAX.

This worked for me:

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

Then to use it, for example:

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

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

I believe that setting the scrollTop in FF does not work when overflow of the element is visible. It works if the overflow is hidden