<header>
  <h2 class="title">wheelEvent - deltaMode</h2>
  <p class="description">Визначає одиницю виміру для змін при скролінгу колеса миші.</p>
</header>
<main>
  <div class="result">
    <div class="scrollable" id="scrollable-area">
      <p>Прокручуйте тут, щоб побачити значення deltaMode та відстань скролінгу.</p>
      
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam consequatur ut numquam tempore sequi expedita nemo quam tenetur! Dolorem, provident ipsam! Repellat sequi quis commodi temporibus obcaecati, sed possimus! Rerum.
      Rem, optio provident. Asperiores at quas libero nesciunt voluptatibus voluptate. Itaque ullam voluptas nostrum architecto voluptatibus in, excepturi, sapiente amet, non fuga iusto vero cupiditate eveniet obcaecati quidem saepe provident.
      Nam sequi atque labore, adipisci, animi ullam numquam doloremque impedit obcaecati explicabo accusamus est, ut cupiditate expedita aspernatur nostrum non perferendis quo quasi odit quod dicta porro nihil. Assumenda, saepe.
      Aliquid quod exercitationem deserunt, unde numquam excepturi quidem quaerat vel tempore beatae deleniti perspiciatis ducimus repellat modi. Saepe quos nam consectetur. Laudantium fugiat provident ipsum velit quasi molestias porro ratione!
      Ullam doloribus facere minima sit velit, minus nemo, similique, voluptate quia aliquam quaerat! Maiores quas neque laboriosam expedita, at est! In illum quas culpa distinctio non est ullam possimus facilis?
      Sint, recusandae reiciendis. Non in, saepe facilis sequi accusantium, iste animi velit esse dolores iusto obcaecati enim voluptatum illum odio, at quod sunt officiis vitae. Natus fuga dolor mollitia nulla?
      Ex at vero exercitationem molestias ipsa reprehenderit saepe fuga maxime! Ullam doloribus totam esse aspernatur? Nam libero accusamus, commodi omnis vel ex laborum? Quae veritatis asperiores officiis qui aut similique?
      Deleniti dicta nisi, consequuntur ullam corporis cum ut et itaque quam dolore consequatur ipsum? Voluptatum modi in odio, vero explicabo consequuntur obcaecati animi consequatur consectetur, nulla distinctio molestias perspiciatis repudiandae.
      Aut harum nobis repellendus dolorum quae incidunt doloremque quidem. Iste ipsum at, unde quia vero rem atque dolorem sunt adipisci molestias sapiente. Soluta id maiores sint impedit quia tenetur vel.
      Maiores rerum autem, itaque iste magni excepturi laborum provident cupiditate neque saepe at corporis necessitatibus fugit in dolor ullam ducimus explicabo et unde, reiciendis veritatis magnam voluptate eaque. Cum, nemo!
      Qui illum illo perferendis sapiente sint ipsum quidem laboriosam excepturi aliquam, hic, dignissimos rerum natus atque similique velit. Doloremque nostrum voluptatum facere odit quia alias excepturi eos quisquam qui dolor.
      Nostrum cupiditate, ea sequi iusto saepe quo, suscipit porro esse aspernatur quibusdam soluta aliquid quia fugit odit cumque, blanditiis magni expedita eveniet! Officia rem, praesentium tempore odit alias consequatur quidem.
      Quibusdam velit odio quidem consequatur deleniti magni excepturi repellat expedita. Ipsa eius quasi nemo dolorem consectetur corporis labore enim, porro dicta fugit eum fugiat sunt. Ea libero debitis quibusdam temporibus?
      Expedita ratione eius, autem quia ipsum animi culpa possimus amet? Beatae laborum velit sapiente ut alias rem accusantium qui quam optio quas dolores error iusto, voluptatum cupiditate ducimus expedita ad!
      Quod natus deserunt velit ducimus laudantium sapiente quibusdam aut molestiae sed, officiis sint tempora voluptate nisi minus aliquam impedit illo nesciunt odio maiores, neque dolorum! Voluptate voluptates doloribus ipsam labore?
      Enim nesciunt, minus explicabo earum dolor doloribus mollitia similique recusandae quibusdam beatae hic animi accusamus ut reiciendis non molestias, nostrum minima aut. Aliquam hic temporibus dolores quam eaque debitis sapiente!
      Officiis dignissimos laboriosam unde esse odit. Sunt, incidunt velit non ex deserunt iusto labore praesentium fuga voluptates ut eius reiciendis ullam consequuntur tempore unde, dignissimos iste reprehenderit ab? Laboriosam, neque?
      Temporibus est in expedita quo maxime autem magni modi illo, et deleniti corrupti. Odit veritatis repellendus facilis illo nostrum sapiente, cum ut doloribus iste soluta atque, tenetur vitae! Nam, ipsam?
      Maxime vitae culpa nostrum libero animi error veritatis aspernatur aliquam, nihil sunt recusandae sequi, dolore amet exercitationem. Inventore corrupti beatae repudiandae? Suscipit optio fuga soluta, esse eum ea perferendis obcaecati.
      Incidunt libero deleniti nemo iste accusantium quam labore laudantium magni. Error expedita voluptatibus consectetur enim fugit quaerat debitis ipsum necessitatibus suscipit, repellat delectus labore nesciunt neque natus illum ex impedit?</p>
    </div>
    <p id="output"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.scrollable {
  height: 150px;
  overflow-y: auto;
  border: 2px solid #ccc;
  padding: 10px;
  margin-top: 15px;
}

const scrollableArea = document.getElementById('scrollable-area');
const output = document.getElementById('output');

scrollableArea.addEventListener('wheel', (event) => {

  // Визначаємо тип deltaMode
  let mode;
  switch(event.deltaMode) {
    case 0:
      mode = 'Пікселі';
      break;
    case 1:
      mode = 'Рядки';
      break;
    case 2:
      mode = 'Сторінки';
      break;
    default:
      mode = 'Невідомий';
  }

  // Виводимо інформацію про deltaMode і значення скролінгу
  output.innerHTML = `
    <p>Режим: ${mode}</p>
    <p>deltaX: ${event.deltaX}</p>
    <p>deltaY: ${event.deltaY}</p>
    <p>deltaZ: ${event.deltaZ}</p>
  `;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.