CSS - 滾動消耗在

Question

之後的div上我有兩個div，其中一個隨後打算作爲右側抽屜，當抽屜打開時我試着滾動，scroll事件被後面的div所消耗。我需要做什麼才能讓抽屜消耗滾動事件。我的意思是，我需要在沒有經過主要區域的抽屜上滾動。

這裏是我的小提琴：http://jsfiddle.net/jmhostalet/D3Qww/

<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

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

謝謝!!

Answer 1

你可以這樣做：

.rightDrawer { 
background-color: lightgreen; 
position: fixed; 
width: 400px; 
height: 100%; 
overflow-y: overlay; 
top: 0; 
right: 0; 
z-index: 5; 
} 

繼承人的FIDDLE