Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I set textarea scroll bar to bottom as a default?

I have a textarea that is being dynamically reloaded as user input is being sent in. It refreshes itself every couple seconds. When the amount of text in this textarea exceeds the size of the textarea, a scroll bar appears. However the scroll bar isn't really usable because if you start scrolling down, a couple seconds later the textarea refreshes and brings the scroll bar right back up to the top. I want to set the scroll bar to by default show the bottom most text. Anyone have an idea of how to do so?

like image 391
moesef Avatar asked Feb 07 '12 03:02

moesef


People also ask

How do I add a scrollbar to the bottom in HTML?

That'd be :: messageBody. lastChild. scrollIntoView(); //for the initial scroll to bottom position. p.s.: After the page load, this command should be called by your message handler on message update.

How do I automatically scroll down in HTML?

The first one is with javascript: set the scrollTop property of the scrollable element (e.g. document. body. scrollTop = 1000; ). The second is setting the link to point to a specific id in the page e.g.

How do I find the scroll position at the bottom?

scroll(function() { if($(window). scrollTop() + window. innerHeight == $(document). height()) { alert("bottom!"); } });

How do I enable scroll disabled in textarea?

the easiest way would be to use "readonly" instead. another way would be to use a fixed-height div will overflow:scroll that looks like a textarea but isn't.


2 Answers

pretty simple, in vanilla javascript:

var textarea = document.getElementById('textarea_id'); textarea.scrollTop = textarea.scrollHeight; 
like image 100
Will P. Avatar answered Oct 02 '22 08:10

Will P.


You can use this with jQuery

$(document).ready(function(){     var $textarea = $('#textarea_id');     $textarea.scrollTop($textarea[0].scrollHeight); }); 
like image 37
Mahfud Harun Avatar answered Oct 02 '22 10:10

Mahfud Harun