CSS - 스크롤이 아래쪽에 도달했을 때 div 뒤에 스크롤됩니다.

Question

두 개의 div가 있습니다. 그 중 하나는 올바른 서랍으로 계획되어 있습니다. 서랍을 열면 아래로 스크롤되어 스크롤됩니다. 이벤트는 뒤에있는 div (노란색)에 의해 소비됩니다. 내 마우스가 노란색 영역 위에있을 때 스크롤 할 수 있도록 노란색 div가 필요합니다. 마우스를 녹색 영역 위에 놓으면 스크롤 할 수 있도록 녹색 div가 필요하지만 마우스를 놓으면 스크롤 영역을 차지할 노란색 영역이 필요하지 않습니다. 녹색 영역과 끝에 도달. 내가 무엇을 할 수 있을지?

여기 내 바이올린입니다 :

.main{ 
    background-color:yellow; 
} 
.rightDrawer{ 
    background-color:lightgreen; 
    position: fixed; 
    width: 400px; 
    top:0; 
    right:0; 
    z-index:5; 
    height: 100%; 
    overflow: auto; 
} 
.scrollableArea{ 
    overflow:scroll; 
} 

감사합니다 http://jsfiddle.net/jmhostalet/Nr7hq/

<div ng-app> 
<div ng-controller="MyCtrl"> 
<div ng-repeat="value in values" class="main"> 
    M{{value}}<br/> 
</div> 
<div class="rightDrawer"> 
    <div class="scrollableArea"> 
     <div ng-repeat="value in values2"> 
      D{{value}}<br/> 
     </div> 
    </div> 
</div> 
</div> 

내 CSS!

Answer 1

이

.main{ 
    background-color:yellow; 
    overfiow:hidden 
} 
    .main:hover { 
    background-color:yellow; 
    overfiow:auto 
} 
    .scrollableArea{ 
    overflow:hidden 
} 
    .scrollableArea:hover{ 
    overflow:scroll; 
} 

등이있다