If you want the options and page 01 bits to be fixed them i'm not sure the benefit of using core-scroll-header-panel. I would do something like this: http://jsbin.com/qahofi
Trying to put core-scaffold inside of core-pages inside of core-scroll-header-panel is going against the grain. I don't think core-scaffold was ever designed to be composed inside of a core-scroll-header-panel, and you're running into some scroll event weirdness. I'd recommend not going that route, and instead see if you can make your app work with core-drawer-panel On Fri, Dec 5, 2014 at 12:16 PM, Kelly St. John <[email protected]> wrote: > > Hi Rob, > > Yes, your summary of the situation is accurate. I have now updated the > jsbin (see below), incorporating your suggested solution as well as my > previous core-pages height 'fix', to reflect the current state of the site > and the remaining scrolling issues. I've also reduced the sample code > somewhat to make it clearer. With the core-pages height at 400vh, it is > harder to make the inner scrollbar appear, but it is of course still > possible depending on the 'main' contents and the size of the user's > viewport. A smaller viewport with this jsbin still shows the problem I was > originally mentioning. With this new core-pages height, I can avoid the > inner scrollbar from appearing on my site as the content I am loading is of > known height. However, if you know a better way to accomplish that I'm all > ears for sure! > > That issue aside, and presuming the increased height of core-pages is a > sufficiently suitable fix, the problem now is that the drawer header(s) > displaying 'Options' and 'Page 01', now scroll with the content. I'd like > to fix these in place if possible, and only scroll the content itself. > > Here's the updated jsbin for your reference: http://jsbin.com/muniqi/3/ > > Cheers, > Kelly > > On Friday, 5 December 2014 11:09:43 UTC-8, Rob Dodson wrote: >> >> It would help if you could reduce this for me. >> >> It sounds like you're trying to put core-scaffold inside of core-pages >> and then put all of that inside of core-header-panel. And that is causing >> scrollbar weirdness? >> >> On Thu, Dec 4, 2014 at 8:33 PM, Kelly St. John <[email protected]> wrote: >> >>> Not really...but sort of... :-) Read on... >>> >>> Your example removed the reliance on the 'core-scaffold'. Rather, it >>> seems you went about using it's individual components to recreate similar, >>> but slightly different behaviour. In trying to implement your example into >>> my existing site, it highlighted for me what was causing the appearance of >>> multiple scrollbars. In my initial jsbin sample code, you'll notice I have >>> specified core-pages height as '100vh' the top level polymer element (i.e. >>> my-app-element). The second level polymer element (i.e. >>> my-scaffold-page-element)...which it seems you've been focusing on >>> fixing...loads within the aforementioned core-pages. Therefore, the nested >>> scaffold element's *maximum* height is 100vh. Further down the chain, >>> when the scaffold-element's main content area's height flows past its >>> host's height limitation, it caused a secondary 'inner' scrollbar to >>> appear, which has a different vertical extent than the original outer >>> scrollbar...so trying to use the outer scrollbar alone doesn't effectively >>> scroll the inner content to its entire vertical extent...forcing you to use >>> the inner scrollbar as well to get the job done. Ugly to say the least. >>> >>> Now that I know that is the case, one way to reduce the likelihood of an >>> inner scrollbar appearing for the nested scaffold element's main content >>> area is to change it's parent element's core-pages height to something much >>> greater than 100vh (300 or 400vh perhaps?). Doing so solves the problem in >>> a roundabout way. The outer scrollbar can now be used to scroll the entire >>> vertical extent of the nested scaffold's contents without an inner >>> scrollbar occurring. However, there is a catch... >>> >>> It creates a side-effect I don't much like. Now, I cannot seem to 'fix' >>> the drawer panel's header/main content toolbar (using your solution code) >>> in place so they do not scroll with the content. I've tried setting >>> different modes on core-header-panel and also tried using >>> core-scroll-header-panel in place of core-header-panel along with it's >>> 'fixed' attribute enabled...but no dice! >>> >>> If this isn't a clear explanation, just let me know and I can update the >>> jsbin with what I currently have. >>> >>> Thanks again Rob, >>> >>> Kelly >>> >>> >>> >>> On Thursday, 4 December 2014 17:48:29 UTC-8, Rob Dodson wrote: >>>> >>>> Let's give this one a shot: http://jsbin.com/wiweta/20/edit >>>> >>>> is that closer to what you're after? >>>> >>>> On Thu, Dec 4, 2014 at 5:42 PM, Kelly St. John <[email protected]> wrote: >>>> >>>>> Hi Rob, >>>>> >>>>> Yes, I'd like to have a visible drawer / side menu on desktop that >>>>> slides away on mobile, and on mobile can be reopened via swipe or via >>>>> tapping drawer icon (default scaffold functionality I believe). >>>>> >>>>> Thanks again for looking into this for me! >>>>> >>>>> >>>>> On Thursday, 4 December 2014 17:35:10 UTC-8, Rob Dodson wrote: >>>>>> >>>>>> Do you want a visible drawer on desktop? >>>>>> >>>>>> On Wed, Dec 3, 2014 at 4:14 PM, Kelly St. John <[email protected]> >>>>>> wrote: >>>>>> >>>>>>> Hi Rob, >>>>>>> >>>>>>> Thanks again for the reply. To clarify, I'm not necessarily looking >>>>>>> for the left menu header (drawer header) to collapse along with the >>>>>>> content >>>>>>> of the main page. Currently, core-scroll-header-panel is the top level >>>>>>> element (#appHeader), which has the scrollAwayTopbar attribute >>>>>>> set...hence >>>>>>> it slides away when the outside scrollbar is utilized (desired >>>>>>> behaviour). >>>>>>> That said, the problem is the the same outer scrollbar does not >>>>>>> currently >>>>>>> scroll the inner content (i.e. within the scaffold main content) to its >>>>>>> full vertical extent. >>>>>>> >>>>>>> I hope that description helps... >>>>>>> >>>>>>> Kelly >>>>>>> >>>>>>> On Wednesday, 3 December 2014 14:59:12 UTC-8, Rob Dodson wrote: >>>>>>>> >>>>>>>> Hm... I can get part of the way there: http://jsbin.com/wiweta >>>>>>>> /17/edit >>>>>>>> >>>>>>>> However I'm not sure how to make the menu header collapse along >>>>>>>> with the content of the main page. Frankie do you have any ideas? >>>>>>>> >>>>>>>> On Tue, Dec 2, 2014 at 10:29 AM, Kelly St. John <[email protected]> >>>>>>>> wrote: >>>>>>>> >>>>>>>>> I've posted the issue description along with a jsbin on Stack >>>>>>>>> Overflow for your review: >>>>>>>>> >>>>>>>>> http://stackoverflow.com/questions/27241020/polymer-nested-c >>>>>>>>> ore-scaffold-and-multiple-vertical-scrollbars-scrolling-extent >>>>>>>>> >>>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>>>>>> --- >>>>>>>>> You received this message because you are subscribed to the Google >>>>>>>>> Groups "Polymer" group. >>>>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>>>> send an email to [email protected]. >>>>>>>>> To view this discussion on the web visit >>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/18b4e43e-cf1b- >>>>>>>>> 46dd-8f43-451f69224d8d%40googlegroups.com >>>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/18b4e43e-cf1b-46dd-8f43-451f69224d8d%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>>>>> . >>>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>>> >>>>>>>> >>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>>>> --- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "Polymer" group. >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>> send an email to [email protected]. >>>>>>> To view this discussion on the web visit >>>>>>> https://groups.google.com/d/msgid/polymer-dev/40ff0a77-11da- >>>>>>> 4a0f-9077-295da686228a%40googlegroups.com >>>>>>> <https://groups.google.com/d/msgid/polymer-dev/40ff0a77-11da-4a0f-9077-295da686228a%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>>> . >>>>>>> >>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>> >>>>>> >>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>> --- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Polymer" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>> msgid/polymer-dev/5e2b3506-ed78-4f8a-8a46-0d6470e57c44%40googl >>>>> egroups.com >>>>> <https://groups.google.com/d/msgid/polymer-dev/5e2b3506-ed78-4f8a-8a46-0d6470e57c44%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> To view this discussion on the web visit https://groups.google.com/d/ >>> msgid/polymer-dev/41e14b6e-3ea1-4085-955d-ed8fc307a71a% >>> 40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/41e14b6e-3ea1-4085-955d-ed8fc307a71a%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/f4797ecf-abb1-4a38-82e5-92d62af600d4%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/f4797ecf-abb1-4a38-82e5-92d62af600d4%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwAkzNX0KHMtNr2ofmR%3DZz7wKP6EedDUzVmKLWCC4Yuutw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
