scroll - テキストエリアを編集するとき、含まれている div がスクロールしないようにするにはどうすればよいですか?

Question

ユーザーがテキストエリアを作成し、overflow:hidden を使用してコンテナー div 内で好きなように移動できる Web サイトを開発しています - 一枚の紙に対応します。

私の問題は、テキストエリアがコンテナーの端に配置されている場合に発生します (つまり、テキストエリアの一部のみが表示されます)。ユーザーがテキストエリアに入力し、キャレットが表示部分の外に移動すると、コンテナがスクロールしてすべてのテキストエリアが表示されます。

このフィドルのテキストエリアのセミコロンの後に何かを入力して試してみてください: http://jsfiddle.net/PG8SU/2/

<div class="container">
    <p>Some other text</p>
    <textarea>Type:</textarea>
</div>

.container {
    position:absolute;
    width:300px;
    height:500px;
    border:2px solid blue;
    overflow:hidden;
    top: 50px; 
    left:100px;
}
textarea {
    position:absolute;
    display:block;
    left:250px;
    width:100px;
    top:200px;
}

これは、Chrome や IE など、ほとんどのブラウザでのデフォルトの動作のようです。コンテナのスクロールを避けたいのですが、ユーザーが入力してもテキストエリアが部分的に表示されたままになります。

これをどのように行うことができるかについて、誰かが考えを持っていますか?