JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="viewport">
    <br /><br /><br /><br /><br /><br /><br />
    <textarea rows="3" id="zone"></textarea>
  </div>
</div>

CSS

body {
  background: #ccc;
  margin: 5px;
}
.wrapper {
  background: #fff;
  height: 200px;
  padding: 5px;
}
.viewport {
  -webkit-transform: translateY(-200px);
}

JavaScript

$('#zone').keyup(function(){
  var scroll = $(this).scrollTop();
  $(this).scrollTop(scroll+50);
});