how to make to scroll on mouse position div only?

i want to prevent scrolling other DIV of scrolling DIV.

<div id="body">
  <div class="long">
    <div class="half-height" style="background-color:blue"></div>
    <div class="half-height" style="background-color:yellow"></div>
  </div>

  <div id="left-side" class="side">
    <div class="long">    
        <div class="half-height" style="background-color:red"></div>
        <div class="half-height" style="background-color:green"></div>
    </div>
  </div>
<div>

  <div id="right-side" class="side">
    <div class="half-height" style="background-color:black"></div>
    <div class="half-height" style="background-color:white"></div>
  </div>


#body {
  height:300px;
  width:300px;
  background-color:white;
  overflow:auto;
  position:relative;
}

.long {
  height:500px;
}

.half-height {
  height:50%;
}

.side {
  height:100%;
  position:absolute;
  width:30%;
  background-color:white;
  top:0;
  overflow:auto;
}

#left-side {
  left:0;
}

#right-side {
  right:0;
}

1.left-side DIV have to scrollable without body scrolling. (when left-side's scrollbar touch to end, body start to scroll, i want to fix this)

2.when i wheel scroll in right-side DIV, body is not to be scrolled

here's my fiddle https://jsfiddle.net/vuju6pgb/