3

by odinokun

HTML

<header>
  <h2>Начало документа</h2>
</header>
<div></div>
<div class='test4'>
  <div class='test3'>
    <div class='test2'>
      <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        </tr>
      </table>
      <div class='test'>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe culpa quasi cumque molestias harum voluptate sint laboriosam natus officiis in. Labore exercitationem, expedita officiis hic odit alias cum rem reprehenderit.</div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, tempore consequuntur porro, temporibus id assumenda atque minus? Consectetur, alias, totam? Esse nesciunt inventore suscipit ex placeat est accusamus consequatur facilis reprehenderit
        delectus, maxime impedit, fugiat cum. Deserunt molestiae ullam, ducimus ratione dolorem dignissimos nemo fugiat facilis dolores tempora architecto laboriosam amet magni laborum placeat tempore expedita eveniet recusandae blanditiis maxime maiores
        illo! Cupiditate qui rerum, expedita obcaecati quos earum possimus suscipit ratione quas impedit, sequi soluta, vitae corporis aspernatur. Qui error vel tenetur nesciunt rem ipsam excepturi, sunt adipisci dolore nulla dignissimos eaque mollitia
        officia eum, debitis nihil dicta in.
      </div>
      <div class='test'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, tempore consequuntur porro, temporibus id assumenda atque minus? Consectetur, alias, totam? Esse nesciunt inventore suscipit ex placeat est accusamus consequatur facilis reprehenderit
        delectus, maxime impedit, fugiat cum. Deserunt...

CSS

body {
  height: 1500px;
  margin: 0;
}
.test3 {
  background-color: green;
  width: 90%;
  height: 300px;
  overflow-x: hidden;
  
}

JavaScript

document.onwheel = function(e) {
  if ( e.target.parentElement.className != "test3" ) 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();
  }
};