Mouse wheel scroll in Polymer core-scroll-header-panel not working, when mouse is over core-toolbar

1
votes

This is the demo from polymer-project.org for core-scroll-header-panel: https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demo.html

What's wrong:
 put mouse over some list item and scroll mouse wheel down
=> you will see that all the content (list) is scrolled and core-toolbar changes its height to some minimal height and then scrolled up over the screen.
Everything is OK.

Now put mouse somewhere on the core-toolbar and scroll mouse wheel down.
=> nothing will happen

The question is:
 what should I do to have the same scroll for mouse pointing over content and for core-toolbar both.

For example, page from documentation has no such problems (https://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel). Seems like it uses other polymer components (or maybe not the polymer, I don't know).

Thanks for any help.

1
polymer

1 Answers

2
votes

This happens because the core-scroll-header-panel's headerContainer (inside its Shadow DOM) is blocking the scrolling.

One possible solution is to disable it from receiving touch or mouse events by setting the pointer-events to none.

core-scroll-header-panel::shadow #headerContainer {
    pointer-events: none;
}