Question

64

Dynamically Scrolling a Textarea

rated 0 times [ 67] [ 3] / answers: 1 / hits: 39333 / 16 Years ago, fri, march 13, 2009, 12:00:00

I have a textarea html element on my page that gets reloaded via ajax. The whole textarea is returned each time not just its content, and the content grows over time. Along with the textarea i return the following piece of javascript:

<script type=text/javascript >



var textArea = document.getElementById('outputTextResultsArea');

textArea.scrollTop = textArea.scrollHeight;

</script>

In firefox 3.0.7 this places the scroll bar at the bottom of the textArea, allowing me to see the latest of the output. However in IE 7 i see different behaviour. The scrollbar moves down with the content as intended, but once the content is greater then the textarea height the scroll bar no longer moves down. It seems as if IE is remembering the original scroll height of the element, not the new height.

I am using the xhtml transitional doctype if that helps. Also if this can be achieved with jQuery that would be fine as I have access to that.

Thanks in advance

Neil

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 16 Years ago claudia · Accepted Answer

As a quick hack you can just do this:

textArea.scrollTop = 99999;

Another option is to try it in a timer:

setTimeout(function()

{

    var textArea = document.getElementById('outputTextResultsArea');

    textArea.scrollTop = textArea.scrollHeight;

}, 10);