Scroll textarea

HTML

<header>
  <h2>Начало документа</h2>
</header>

<textarea class ='test'>
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
  </textarea>


<footer style="position: absolute; bottom: 0">
  Конец документа.
</footer>

CSS

body {
  height: 1500px;
  position: relative;
}

.test {
  width:100px;
  height:300px;
  overflow:auto;
}

JavaScript

document.onwheel = function(e) {
  if (e.target.className != "test") return;
  var area = e.target;

  var delta = e.deltaY || e.detail || e.wheelDelta;

  if (delta < 0 && area.scrollTop == 0) {
    e.preventDefault();
  }

  if (
    delta > 0 &&
    area.scrollHeight - area.clientHeight - area.scrollTop <= 1
  ) {
    e.preventDefault();
  }
};