html - 不同div的Angularjs独立滚动

Question

我的 Angular 元素中有两个 div。我希望这两个 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>

我希望 div 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 标签的滚动条，这样我就可以为 bml 和 bvl 标签设置独立的标签。但是这样做会阻止整个页面使用卷轴。非常感谢为实现这一目标提供的任何帮助。

Answer 1

我为子 div 添加了高度，它开始按预期工作。

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