div scroll

HTML

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

<div class="block">
  <div>Amet rem iusto debitis doloremque id corporis enim minus veritatis in deserunt ab sunt magnam quaerat consequuntur tempore, rerum voluptate perspiciatis soluta nulla maxime. Nisi eaque placeat accusamus laudantium quibusdam!</div>
  <div>Odio ut culpa suscipit doloremque veniam provident corporis enim exercitationem, quasi quibusdam, minima dicta repellat nemo. Nam ut nostrum, quam soluta non unde. Quia, similique delectus, non voluptates natus quas.</div>
  <div>Dolorum atque quidem nemo iste, perferendis ipsum eum vel consectetur quas possimus, distinctio, deserunt! Ducimus quod reprehenderit temporibus rem unde quia, esse officia voluptate nihil eaque. Voluptatem beatae, ratione quo!</div>
  <div>Qui totam eaque nostrum mollitia atque nulla asperiores ut at modi cumque corrupti commodi corporis, est amet ipsa, praesentium fugiat voluptatem. Quibusdam a, reprehenderit quo repellat neque. Unde, est, maxime!</div>
  <div>Quas ex tempore cumque molestias esse cupiditate perferendis, itaque dicta excepturi possimus sapiente corrupti, quidem alias architecto pariatur! Reprehenderit voluptates, eaque dolor hic perferendis est ab natus non unde sunt.</div>
  <div>Est possimus quae delectus magnam vero ex perferendis. Qui quia, perferendis. Assumenda voluptates quaerat voluptatem molestias asperiores sequi molestiae blanditiis quae. Adipisci eius architecto assumenda inventore placeat, corporis. Odio, quasi!</div>
  <div>Suscipit aliquam totam id, praesentium reprehenderit perferendis quisquam pariatur magni? Quas repudiandae accusamus esse, aspernatur repellendus, enim recusandae fugit iste, dolor officiis facere inventore debitis eaque consectetur accusantium soluta
    praesentium.</div>
  <div>Ipsum rerum architecto voluptates magni voluptate omnis natus sequi magnam at ad vel nisi, earum autem, porro, praesentium. Dignissimos dolore itaque magni assumenda similique ipsam expedita...

CSS

body {
  height: 1500px;
}

.block {
  display: block;
  height: 200px;
  background-color: pink;
  width: 300px;
  overflow-x: hidden;
  overflow-y: auto !important;
  margin-bottom: 50px;
}

JavaScript

document.onwheel = function(e) {

  if ( e.target.parentElement.className !="block" ) return;
  var area = e.target.parentElement;

  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();
  }
};