How can I hide a textarea scrollbar without using overflow:hidden?

I want to display a textarea without a scrollbar while maintaining the scrolling behaviour. As the user types I just want the upper lines to disappear off the top of the text box.

I can achieve this in IE and Chrome using overflow:hidden. However, when testing in Firefox 5 on Windows the textarea doesn't automatically scroll and the new text drops off the bottom of the textarea instead of the top.

Using ove开发者_高级运维rflow:scroll works well but I need a reliable cross-browser way to hide the scrollbar. Any ideas would be much appreciated.

Using jQuery should be a wise way:

$('textarea').keyup(function(){
    $(this).scrollTop(9999)
})

For future reference there is also a simple solution without jQuery - just wrapper div with owerflow:hidden and JavaScript two-liner:

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";