angular material 右侧边栏问题

Question

查看此 angular material 演示

<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
  <md-toolbar layout="column" class="main-toolbar md-medium-tall">
    <span flex="flex">
      <h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
    </span>
  </md-toolbar>
  <section layout="row" flex="">

    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

      <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
      </md-toolbar>
      <md-content layout-padding="" ng-controller="LeftCtrl">
        <md-button ng-click="close()" class="md-primary" hide-gt-md="">
          Close Sidenav Left
        </md-button>
        <p hide-md="" show-gt-md="">
          This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
        </p>
      </md-content>

    </md-sidenav>

    <md-content flex="" layout-padding="">

      <div layout="column" layout-fill="" layout-align="top center">
        <p>
          The left sidenav will 'lock open' on a medium (&gt;=960px wide) device.
        </p>
        <p>
          The right sidenav will focus on a specific child element.
        </p>

        <div>
          <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
            Toggle left
          </md-button>
        </div>

        <div>
          <md-button ng-click="toggleRight()" class="md-primary">
            Toggle right
          </md-button>
        </div>
      </div>

      <div flex=""></div>

    </md-content>
    <div layout="row">
      <!--This is new-->
      <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">

        <md-toolbar class="md-theme-light">
          <h1 class="md-toolbar-tools">Sidenav Right</h1>
        </md-toolbar>
        <md-content ng-controller="RightCtrl" layout-padding="">
          <form>
            <md-input-container>
              <label for="testInput">Test input</label>
              <input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
            </md-input-container>
          </form>
          <md-button ng-click="close()" class="md-primary">
            Close Sidenav Right
          </md-button>
        </md-content>

      </md-sidenav>
    </div>
  </section>

</div>

如果你打开左侧边栏，打开很顺利，但是如果你打开右侧边栏，在打开和关闭的过程中，页面会出现滚动条（主要内容区域的水平滚动条）。

我怎样才能更新页面，使右侧栏像左侧栏一样打开和关闭（在内容区域没有滚动条的情况下流畅地打开和关闭）

Answer 1

您可以在体内使用overflow: hidden，但它可能会影响其他组件。试试这个：

#sideNavContainer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

希望对您有所帮助。

angular material 右侧边栏问题

angular material right side bar issue

angularjs

angular-material