使用 AngularJS 材料为 md-tab-body div 设置滚动 y

Question

我在这里使用了 angularjs 材质标签，我需要滚动“md-tab-body”部分，我已经尝试了堆栈溢出的所有可能性，但滚动不起作用。

<md-tabs md-enable-disconnect md-dynamic-height md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}">
  <md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
    <md-tab-label>
      <span translate id="ipwardId{{$index}}">{{ward.name}}</span>
    </md-tab-label>
    <md-tab-body>
      <div style="margin:10px;" layout="row">
        <md-grid-list flex>
          <md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
            <md-grid-tile-header>
              {{::bed.name}}
            </md-grid-tile-header>
          </md-grid-tile>
        </md-grid-list>
      </div>
    </md-tab-body>
  </md-tab>
</md-tabs>

上面的代码我使用了我的应用程序。我需要帮助来为 body 部分设置 oveflow-y。

Answer 1

如果您的情况是这样的，您可以这样做可能会对您有所帮助：

<!-- if you have any div outside-->
<div style="height:100%"> 
<md-tabs md-enable-disconnect md-border-bottom md-selected='vm.tabIndex' id="wardName{{$index}}" class="helloHeight">
        <md-tab ng-repeat="ward in vm.inpatientwards" ng-click="vm.loadWardview(ward._id)">
            <md-tab-label>
                <span translate id="ipwardId{{$index}}">{{ward.name}}</span>
            </md-tab-label>
            <md-tab-body>
              <!-- try to inspect this div-->
                    <div style="margin:10px;height:100%;overflow-y: auto;" layout="row">
                        <md-grid-list  flex>
                            <md-grid-tile ng-repeat="bed in vm.wardbeds" ng-click="vm.selectBed(bed)" id="wardBeds{{$index}}">
                                <md-grid-tile-header >
                                    {{::bed.name}}
                                </md-grid-tile-header>
                            </md-grid-tile>
                        </md-grid-list>
                </div>
            </md-tab-body>
        </md-tab>

.helloHeight{
   height:100%;
 }

不确定是否没有测试过这段代码。