Question

上的角度材料演示

<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;
}

希望得到这个帮助。

角材料右侧杆问题

1 个答案: