Как я могу остановить область текста, растущую за пределы экрана?

У меня есть код jQuery, который я использую для автоматического изменения размера textarea, когда пользователь вводит в него. Есть ли способ заставить его остановиться, когда он доберется до нижней части экрана?Как я могу остановить область текста, растущую за пределы экрана?

<html> 
<head> 
    <title>Page Title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> 
</head> 
<style> 
    .modalTextArea{ 
     overflow: hidden; 
     z-index: 1; 
    } 
</style> 
<body> 
    <div class="modal-content">   
     <textarea class='modalTextArea' rows = 2 style='width: 100%'></textarea> 
    </div> 
    <script src = 'js/script.js'></script> 
</body> 
</html>

$('.modalTextArea').on('keyup', function(e){ 
    $(this).css('height', 'auto'); 
    $(this).height(this.scrollHeight + 10); 
});

источник

2016-04-22 discodowney

Просто FYI, ваш 'элемент