ポリマー引き出しパネル「ネスティング」

Question

ここにポリマーの新しさ。ポリマーpaper-drawer-panelとpaper-header-panelをYouTubeの引き出しパネルとコンテンツの動作と同じように動作させようとしています。ヘッダパネルのコンテンツ領域（ここで説明するトピック：Polymer <paper-drawer-panel> nest 'drawer' inside 'main'）内にドロワパネルが「ネスト」され、ドロワの右側のコンテンツがドロワ自体とは独立してスクロールされ、ドロワが開いたときにコンテンツがシャッフルされます権利。

望ましい結果：あなたはスクロールダウンすると、私は引き出しと一緒にスクロールされているコンテンツなどのトラブルを抱えていますが、「入れ子になった」スタイリングを実現してい

は、（引き出しが消えます）。

実際の結果：は

コード：

<paper-header-panel mode="waterfall" class="flex"> 
     <paper-toolbar> 
       <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
       <div class="title">Title</div> 
     </paper-toolbar> 
     <div class="content"> 
      <paper-drawer-panel id="drawerPanel"> 
       <paper-header-panel mode="scroll" drawer> 
        <paper-menu class="list"> 
         <paper-item>New item here</paper-item> 
         <paper-item>New item here</paper-item> 
        </paper-menu> 
       </paper-header-panel> 
       <div main> 
        <div id="mainPanelContent" class="alotofcontent"> 
        </div> 
       </div> 
      </paper-drawer-panel> 
     </div> 
    </paper-header-panel> 

また、DIV「alotofcontent」は、その内容の大半はカットオフ持っています。

.alotofcontent{ 
    width: 100%; 
    height: 25000px; 
} 

ご協力いただきまして誠にありがとうございます。

Answer 1

この

<link rel="import" href="./bower_components/polymer/polymer.html"> 
<link rel="import" href="./bower_components/paper-header-panel/paper-header-panel.html"> 
<link rel="import" href="./bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
<link rel="import" href="./bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="./bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="./bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="./bower_components/paper-item/paper-item.html"> 
<dom-module id="header-drawer-combo"> 
    <template> 
    <style> 
     paper-drawer-panel { 
     --paper-drawer-panel-scrim: { 
      display: none; 
     }; 
     } 
     div [main]{ 
     background-color: lightcyan; 
     overflow: auto; 

     } 
     #mainPanelContent{ 
     width: 670px; 
     margin: 0 auto; 
     } 
    </style> 
    <paper-header-panel> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" on-tap='flipDrawer'></paper-icon-button> 
     <div class="title">Title</div> 
     </paper-toolbar> 
     <div class="content"> 
     <paper-drawer-panel id='drawer' force-narrow> 
      <paper-header-panel mode="scroll" drawer> 
      <paper-menu class="list"> 
       <paper-item>New item here</paper-item> 
       <paper-item>New item here</paper-item> 
      </paper-menu> 
      </paper-header-panel> 
      <div main> 
      <div id="mainPanelContent" class="alotofcontent"> 
       Bacon ipsum dolor amet bacon ham hock ground round fatback tail ball tip shoulder tongue pancetta picanha shankle. Picanha sirloin shank t-bone bresaola pork loin pig capicola filet mignon pork chop leberkas. Corned beef doner chicken, meatloaf 
       t-bone turducken filet mignon pork pork chop jowl rump shoulder. Jerky bresaola t-bone pastrami doner. Jowl spare ribs sausage bresaola cow doner rump prosciutto, t-bone pig pastrami turducken ball tip ground round. Flank pig leberkas short ribs 
       bresaola shoulder. Doner ham tail, tongue kielbasa swine landjaeger ribeye. Ribeye boudin tail tenderloin. Jerky tri-tip shankle, kielbasa ham hock tenderloin ground round hamburger beef ribs venison. Ground round sirloin beef, flank kielbasa 
       capicola beef ribs swine tail strip steak corned beef pork chop rump. Boudin capicola chicken meatloaf venison andouille. Ribeye prosciutto sausage, porchetta cow beef ribs cupim jerky spare ribs alcatra meatball. Meatloaf chicken cupim fatback 
       sirloin. Meatloaf pancetta ham andouille, pork loin pastrami hamburger venison t-bone ribeye jerky meatball. Sausage chuck filet mignon shank tongue. Rump kevin flank hamburger fatback meatball jerky. Biltong drumstick prosciutto, shoulder meatloaf 
       cow tongue salami filet mignon beef ribs spare ribs meatball tri-tip ham hock short loin. Drumstick chicken strip steak alcatra shank frankfurter pork belly porchetta. Cupim swine salami rump. Short ribs short loin bacon pork porchetta tenderloin 
       swine, cow ham hock meatloaf. Meatloaf turducken pork belly flank venison, sausage pork ham. Meatloaf ham hock prosciutto, flank pork pastrami alcatra beef ribs fatback cow pork loin tenderloin bacon capicola short loin. Ham ham hock andouille 
       spare ribs. Prosciutto t-bone shankle pig salami brisket. Chuck doner porchetta capicola pig meatball pork belly pork andouille rump alcatra corned beef turducken. Spare ribs pastrami pancetta chuck alcatra hamburger ground round short ribs. Prosciutto 
       shoulder picanha doner corned beef, sirloin pork chop tongue pancetta short ribs cow chuck ball tip. Frankfurter pork rump bresaola ground round sirloin pancetta fatback kielbasa leberkas filet mignon pork chop boudin shankle pork belly. Kevin 
       swine andouille biltong, pork belly porchetta jerky corned beef short ribs beef ribs frankfurter. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!Bacon ipsum dolor amet bacon ham hock ground round fatback tail ball tip shoulder tongue pancetta picanha shankle. Picanha sirloin shank t-bone bresaola pork loin pig capicola filet mignon pork chop leberkas. Corned beef doner chicken, meatloaf 
       t-bone turducken filet mignon pork pork chop jowl rump shoulder. Jerky bresaola t-bone pastrami doner. Jowl spare ribs sausage bresaola cow doner rump prosciutto, t-bone pig pastrami turducken ball tip ground round. Flank pig leberkas short ribs 
       bresaola shoulder. Doner ham tail, tongue kielbasa swine landjaeger ribeye. Ribeye boudin tail tenderloin. Jerky tri-tip shankle, kielbasa ham hock tenderloin ground round hamburger beef ribs venison. Ground round sirloin beef, flank kielbasa 
       capicola beef ribs swine tail strip steak corned beef pork chop rump. Boudin capicola chicken meatloaf venison andouille. Ribeye prosciutto sausage, porchetta cow beef ribs cupim jerky spare ribs alcatra meatball. Meatloaf chicken cupim fatback 
       sirloin. Meatloaf pancetta ham andouille, pork loin pastrami hamburger venison t-bone ribeye jerky meatball. Sausage chuck filet mignon shank tongue. Rump kevin flank hamburger fatback meatball jerky. Biltong drumstick prosciutto, shoulder meatloaf 
       cow tongue salami filet mignon beef ribs spare ribs meatball tri-tip ham hock short loin. Drumstick chicken strip steak alcatra shank frankfurter pork belly porchetta. Cupim swine salami rump. Short ribs short loin bacon pork porchetta tenderloin 
       swine, cow ham hock meatloaf. Meatloaf turducken pork belly flank venison, sausage pork ham. Meatloaf ham hock prosciutto, flank pork pastrami alcatra beef ribs fatback cow pork loin tenderloin bacon capicola short loin. Ham ham hock andouille 
       spare ribs. Prosciutto t-bone shankle pig salami brisket. Chuck doner porchetta capicola pig meatball pork belly pork andouille rump alcatra corned beef turducken. Spare ribs pastrami pancetta chuck alcatra hamburger ground round short ribs. Prosciutto 
       shoulder picanha doner corned beef, sirloin pork chop tongue pancetta short ribs cow chuck ball tip. Frankfurter pork rump bresaola ground round sirloin pancetta fatback kielbasa leberkas filet mignon pork chop boudin shankle pork belly. Kevin 
       swine andouille biltong, pork belly porchetta jerky corned beef short ribs beef ribs frankfurter. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty! 
      </div> 
      </div> 
     </paper-drawer-panel> 
     </div> 
    </paper-header-panel> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is:'header-drawer-combo', 
    flipDrawer:function(){ 
     this.$.drawer.togglePanel(); 
    } 
    }) 
</script> 


<header-drawer-combo></header-drawer-combo> 

をお試しください