Question

使用Angular 1. *和angular-material。

我遇到了插入<div ng-view></div>和md-content的观点的问题。如果视图的高度大于视图端口。它创建了自己的Y滚动条，所以我有2个Y滚动条彼此相邻。

我可以在overflow-y: hidden上md-content。但是，如何将视图水平推入视口的位置，以便仅使用外部滚动条？

<body ng-app="app">
     <md-toolbar class='md-medium-tall'>
       <div class="main-title">
         <img src="./images/yo-small.png">
         <p class="top-title">foo</p>
         <h5>Bar</h5>
       </div>
     </md-toolbar>

     <div class="menu-container" layout="row">
        <md-sidenav
          md-is-locked-open="$mdMedia('min-width: 900px')" 
          class="md-sidenav-left"
          md-whiteframe="0">

          <md-menu-content>
            <md-menu-item>
              <md-button href="#ppv">
                <md-icon class="material-icons" menu-align-target="">assessment</md-icon>
                  PPV</md-button>
            </md-menu-item>
          </md-menu-content>

        </md-sidenav>

        <md-content>
          <div ng-view></div>
        </md-content>
     </div>
  </body>

<div style="height: 1000px; width: 800px ">
  <h1>mom</h1>
</div>

更新：我能够创建一个黑客来解决这个问题。任何人都可以看到如何使这项工作成为现实吗？

md-content {
  overflow-y: hidden;
}

angular.module('app')
  .controller('PPVCtrl', ['$scope', function($scope) {


    // fix for angular-material responsive issue
    document.body.style.height = "800px";
    $scope.$on('$destroy', function() {
      document.body.style.height = "100%";
    });
  }]);

Angular材质md-content使用它自己的Y滚动条

0 个答案: