JSFiddle - React, Tailwind, and code Playground

HTML

<div id='yellow'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
</div>

<div id='green'>
      <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>

    
</div>

CSS

#yellow{
  background-color: yellow;
  display: inline-block;
  width: 200px;
  height: 200px;
  overflow: auto;
  vertical-align: top;
  padding 20px;
}

#green{
  background-color: green;
  display: inline-block;
  width: 100px;
  height: 200px;
  vertical-align: top;
}

JavaScript

document.getElementById('green').addEventListener('wheel', function(e){


  console.log(e.deltaY); // it is always "-0"

  // scroll div#yellow accordingly
  document.getElementById('yellow').scrollTop+=e.deltaY;
});