異なるdivのAngularjs独立スクロール

Question

私の角型プロジェクトには2つのdivがあります。私は2つのdivに独立したスクロールバーを持たせたい。

divはこのように構成されています。

<div ng-show="$state.includes('base.videolist')||$state.includes('base.movielist')"> 
    <ul class="nav navbar-fixed-top roboto nav-tabs"> 
     <li ui-sref="base.videolist" ui-sref-active="active"><a>Videos</a></li> 
     <li ui-sref="base.movielist" ui-sref-active="active"><a>Movies</a></li> 
    </ul> 
</div> 

<div id="bvl" class="scrol_sctn" ui-view="videolist" ng-init="pullFingerprintData()" ng-show="$state.includes('base.videolist')"></div> 
<div id="bml" class="scrol_sctn" ui-view="movielist" ng-show="$state.includes('base.movielist')"></div> 
<div id="vpl" class="cdnfullscreen" ui-view="videoplayer" ng-show="$state.includes('base.videoplayer')"></div> 

divs bvlとbmlに独立したスクロールが必要です。これは私のCSSファイルです。

body { 
    background:#a5c8f3 !important; 
    font-family: 'Raleway', sans-serif; 
    padding-top: 50px; 
    overflow: hidden; 
} 
.scrol_sctn { 
    margin:0; 
    padding:0; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

bodyタグのscrollerを隠して、bmlタグとbvlタグに独立したタグを付けることができます。しかし、これにより、ページ全体がスクロールの使用を停止します。これを達成するための援助は非常に感謝しています。

Answer 1

私は子divに高さを追加し、期待どおりに動作するようになりました。

.scrol_sctn { 
    margin:30; 
    padding:100; 
    height:100vh; 
    overflow-y: scroll; 
    overflow-x: hidden; 
}