How to make to scroll on mouse position div only?
<p>I want to prevent scrolling other DIV of scrolling DIV.</p>

<p>HTML:</p>

<pre><code>&lt;div id="body"&gt;
  &lt;div class="long"&gt;
    &lt;div class="half-height" style="background-color:blue"&gt;&lt;/div&gt;
    &lt;div class="half-height" style="background-color:yellow"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="left-side" class="side"&gt;
    &lt;div class="long"&gt;    
        &lt;div class="half-height" style="background-color:red"&gt;&lt;/div&gt;
        &lt;div class="half-height" style="background-color:green"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;div&gt;

  &lt;div id="right-side" class="side"&gt;
    &lt;div class="half-height" style="background-color:black"&gt;&lt;/div&gt;
    &lt;div class="half-height" style="background-color:white"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#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;
}
</code></pre>

<ol>
<li><p>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)</p></li>
<li><p>When I wheel scroll in right-side DIV, body is not to be scrolled</p></li>
</ol>

<p>Here's my fiddle <a href="https://jsfiddle.net/vuju6pgb/" rel="nofollow">https://jsfiddle.net/vuju6pgb/</a></p>