Should be able to scroll via header

[nevir]

Hooray for bug reports during active development, right? :P

Just in case you weren't aware, though: You can't scroll(wheel) when the cursor is over the header; which feels a bit broken, especially for really tall headers.

Tricky 'cause the header isn't inside the scrollable element. Perhaps the header should be position: fixed, and inside the scrollable element. The increased complexity of that is no fun, though...

[nevir]

Also, related issue: The scroll bar is obscured by the header when not fixed

[christiandeange]

Any word yet on this issue?

[digitalheir]

Just a screenshot of the scroll bar obscured by the toolbar, in Chromium on Ubuntu.

[frankiefu]

We are looking at ways to address this issue, stay tuned.

[npezza93]

How's the fix coming along?

[ebidel]

The way pp.org solves this is to have the header be position: relative until it hits the condensed height, than it switches to position: fixed

[frankiefu]

The "relative/fixed positioning" approach requires to use document scroll and will not work for element scroll. Using document scroll means the document body is the scroll content and if you need a side drawer or a footer you will have to position them manually and can't use flexbox easily to layout stuffs.

https://github.com/Polymer/core-scroll-header-panel/pull/25 tried to address this issue by putting the header in the scroll area and fix its position through transforms but since scroll events are sent async so the header's position would be off. There is a proposal scroll-blocks-on which will help us to address this.

[ebidel]

Good point @frankiefu. I'm excited about scroll-blocks-on but it won't be available for quit some time across the board. Given that this has bitten a lot of people, I wonder if we could have an opt-in model for #25?

[morgs32]

Whatever you're doing on the docs site works well enough. You could help very many people by supporting 'site-banner'. Doesn't seem to work outside that site.

[yMasukor]

I've worked around this by setting pointer-events:none on the headerContainer. I haven't thoroughly tested it, but for my purposes (rapid prototyping) it works fine.

[krossovochkin]

As @yMasukor said, the quick temp solution for scrolling pointing mouse on header is:

<style shim-shadowdom>
    core-scroll-header-panel::shadow #headerContainer {
       pointer-events: none;
    }
<style>

Works for me too. Reference: http://stackoverflow.com/a/28206577/1533933

[sidkat]

I've opened a pull request #35 . It also addresses issues #15 and #16.

The drawbacks of the "relative/fixed positioning" approach pointed out by @frankiefu and @ebidel should be acceptable in the special case that <core-scroll-header-panel> is used in "fullWindow" mode Without setting this optional attribute it is still a "real" component ready to be used in flexbox layout or whatever.

Yet, even in "fullWindow" mode it can be embedded in a <core-drawer-panel>! The necessary (style) adjustments are made automatically.

See it in action at http://sidkat.net/polymer/sk-scroll-header-panel/demo.html. (Don't miss clicking the icon.)

[didrocks]

Subscribing, having the exact same issue due to having a dominant waterfall-large image. Used core-scroll-header-panel meanwhile, with this workaround (but of course, it doesn't work on links, button…)

[guruganeshm]

Hello Folks!! I encountered same mouse scrolling issue, and after hours of debugging, found that out body "overflow" should be "hidden" then it worked fine.. please let me if it works for you all..

  html body {
  overflow: hidden;
  }