How do I set textarea scroll bar to bottom as a default?
pretty simple, in vanilla javascript:
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
textarea auto scroll to bottom
You need to change
$('#txt-area').scrollTop($('#txt-area').scrollHeight);
to
$('#txt-area').scrollTop($('#txt-area')[0].scrollHeight);
See http://jsfiddle.net/cPYCV/48/
Textarea auto-scroll to the bottom
You need to set scrollTop
each time you append text:
var textarea = document.getElementById('textarea_id');
setInterval(function(){
textarea.value += Math.random()+'\n';
textarea.scrollTop = textarea.scrollHeight;
}, 1000);
http://jsfiddle.net/mya0u1zo/2/
How to have a textarea to keep scrolled to the bottom when updated
You can do it by javascript. Set the scrollTop
property of text area with scrollHeight
property like below:
document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight
Autoscroll to bottom of textarea
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Automatically scroll to the bottom of a text area
Have a look at the updatePolicy property of DefaultCaret: it might do what you want
DefaultCaret caret = (DefaultCaret) textArea.getCaret();
caret.setUpdatePolicy(ALWAYS_UPDATE);
A nice summary of options by Rob (@camickr)
Related Topics
What Is the Current State of the Art in HTML Canvas JavaScript Libraries and Frameworks
Animated Gif Only Loops Once in Chrome and Firefox
How to Zoom a Background Image on a Div with Background-Size
Jquery "Blinking Highlight" Effect on Div
How to Prevent Pull-Down-To-Refresh of Mobile Chrome
JavaScript Alert Not Working in Android Webview
Function in JavaScript That Can Be Called Only Once
Asynchronous Exception Handling with Bluebird Promises
After Travelling Back in Firefox History, JavaScript Won't Run
How to Import Jquery Using Es6 Syntax
How to Remove an Item from an Array in Angularjs Scope
Position Fixed Not Working in Mobile Browser
Affix Is Not Working in Bootstrap 4 (Alpha)
How to Dynamically Remove a Stylesheet from the Current Page
Wait for Background Images in CSS to Be Fully Loaded
Removing Address Bar from Browser (To View on Android)
Jquery Ajax Success Callback Function Definition
Js & Jquery Can't Detect HTML Elements, and Say's They Are Undefined