角度材料の右サイドバーの問題

Question

は、それがスムーズに開きますが、あなたは、右のサイドバーを開いた場合、スクロールを開閉しながら、http://codepen.io/joyal/pen/mPpGBK

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

このヘルプが必要です。