如何製作滾動鼠標位置div？

Question

我想阻止滾動滾動DIV的其他DIV。

HTML：

<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> 
</div> 

CSS：

#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. 左側DIV必須滾動體不滾動。 （當左側的滾動條觸摸結束，身體開始滾動，我想解決這個問題），當我在右側DIV滾輪滾動

2. ，身正，不滾動

這裏是我的小提琴https://jsfiddle.net/vuju6pgb/

Answer 1

你可以在mouseenter事件中添加一個css來設置隱藏溢出並將其切換回去在mouseleave事件上自動執行。

$("#left-side").mouseenter(function(){ 
    $("#body").css("overflow", "hidden"); 
}).mouseleave(function(){ 
    $("#body").css("overflow", "auto"); 
}); 

你可以做同樣的#body和body爲好。

這裏是更新的小提琴https://jsfiddle.net/vuju6pgb/4/