CSS - 滚动被后面的div消耗

Question

我有两个 div，其中一个计划成为右侧抽屉，当抽屉打开并且我尝试滚动时，滚动事件被后面的 div 消耗。我需要做什么才能使抽屉使用滚动事件。我的意思是，我需要在抽屉上滚动，而不是在主要区域上滚动。

这是我的 fiddle :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