Wie macht man das Scrollen nur an der Mausposition div?

Question

Ich möchte Scrolling anderen DIV Scrolling DIV verhindern.

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. linken Seite DIV scrollbaren haben, ohne Körper zu scrollen. (Wenn Scrollbar Berührung der linken Seite bis zum Ende, Körper zu bewegen beginnen, möchte ich dieses Problem beheben)

2. Wenn ich blättere in DIV rechtsseitigen Rad, Körper

nicht werden

gescrollt Hier ist meine Geige https://jsfiddle.net/vuju6pgb/

Answer 1

Sie können eine css auf dem mouseenter -Ereignis hinzufügen, um den Überlauf zu verstecken und schalten Sie es zurück gehen automatisch auf das mouseleave Ereignis.

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

Sie können mit #body und body auch das gleiche tun.

Hier ist die aktualisierte Geige https://jsfiddle.net/vuju6pgb/4/