ページ下部に入力して実行中にテキストエリアがダンスするのを防ぐにはどうすればよいですか？ ：JQuery/CSS

Question

私は継続的に自動サイジングテキストエリアに入力しています。

テキストがページの一番下に流れても、入力を続けます。

私が知っているのは、各キー押しやキーアップとテキスト上で地獄のようなページダンスがページ下部に流れ込むことです（何が起こっているのかを確認するためにスクロールする必要があります）。ページダンスやテキストが下に流れ込むのを防ぐには？

JSフィドル：https://jsfiddle.net/osbnnbxa/

ブラウザ：IE10（また、Firefoxで少し踊りを見つける;しかし、クライアントの使用IE10がこれだけということで作業する必要がある）

HTML：

<div> 
<div> 
    <br><br> &nbsp;&nbsp; 
    <textarea class="normal" name="myarea" id="myarea" style="height: 100px; overflow-y: hidden;"></textarea> 
    </div> 
</div> 
<input type="button" class="butt" value="ehehehhe" /> 

はJQuery：

var myquery = { 
    autoHeight: function(e) { 
    $(e).css({ 
    'height': 'auto', 
    'overflow-y': 'hidden' 
}).height(e.scrollHeight); 
}, 
init: function() { 
setTimeout(function() { 
    $('textarea').each(function() { 
    myquery.autoHeight(this); 
    }).on('input', function() { 
    myquery.autoHeight(this); 
    }); 
}, 200); 
$("textarea").keypress(function(e) { 
    $(".butt").focus();  
    $(this).focus();  
}); 
    } 

}; 

$(myquery.init); 

更新：お客様は、テキストエリアの最大高さを定義しないと言います。テキストが増加するにつれてそれを流してください。

Answer 1

私はあなたがテキストエリアを流れるように言ったことを知っていますが、私はこの解決策が本当に好きです。あなたのフィドルでは、テキストエリアがビューポートの底に近づくようになり、すべてのダンスを停止します。うまくいけば合理的な妥協である。変更されたフィドルはhereです。

textarea { 
    max-height: 85vh; 
}