Create a scrollable area and dispatch a wheel event.

by Hugo Vale Pereira

HTML

<a href style="position: absolute; top: 50px; left: 50px">TESTE</a>
<!-- <div class="x">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div> -->
<div class="y">
  <div class="panel">
    <a href style="position: absolute; top: 100px; left: 50px">TESTE2</a>
  </div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}

.x, .y{
  opacity: 0.5;;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  outline: 2px dashed black;
  outline-offset: -2px;
  overflow: auto;
  pointer-events: none;
}

.x{
  display: flex;

}

.y{
   touch-action: pan-y;
}

.panel{
  pointer-events: all;
  min-width: 100%;
  min-height: 100%;
  display: none;
  
}

.x .panel {
  background: linear-gradient(45deg, lightgreen, transparent);
}

.y .panel {
  background: linear-gradient(135deg, lightcoral, transparent);
}

JavaScript

const y = document.querySelector('.y');

y.addEventListener('wheel', (e)=>{
  console.log('e.deltaY',e.deltaY);
  console.log('e.wheelDeltaY',e.wheelDeltaY);
  console.dir(e)
  })