JSFiddle - React, Tailwind, and code Playground

by Rustam Idrisov

HTML

<main style="height: 1000px; position: relative">

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

  <div id="scrollOverflow">
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
    прокрути меня
  </div>


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

CSS

#scrollOverflow {
  overflow: auto;
  height: 100px;
  width: 200px;
  border: 1px solid #000;
  padding: 5px 50px;
}

JavaScript

document.onwheel = function(e) {
  if (e.target.id != 'scrollOverflow') 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();
  }
};