Polymer 中的鼠标滚轮滚动 core-scroll-header-panel 不工作,当鼠标悬停时 core-toolbar

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

这是 polymer-project.org 为 core-scroll-header-panel 提供的演示: https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demo.html

怎么了:
将鼠标放在某个列表项上并向下滚动鼠标滚轮
=> 你会看到所有内容(列表)都滚动了,core-toolbar 将其高度更改为某个最小高度,然后在屏幕上向上滚动。
一切正常。

现在将鼠标放在 core-toolbar 上的某处并向下滚动鼠标滚轮。
=> 什么都不会发生

问题是:
我应该怎么做才能使鼠标指向内容和 core-toolbar 两者具有相同的滚动。

例如,文档中的页面没有此类问题 (https://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel)。似乎它使用了其他聚合物成分(或者可能不是聚合物,我不知道)。

感谢您的帮助。

发生这种情况是因为 core-scroll-header-panelheaderContainer(在其阴影 DOM 内)阻止了滚动。

一种可能的解决方案是通过将 pointer-events 设置为 none 来禁用它接收触摸或鼠标事件。

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