Vaadin-grid: Delegate scrolling to ancestor element

[heruan]

I'd like to use vaadin-grid inside Polymer's app-header-layout where the header collapses/disappears when the user scrolls, in the same fashion as this:

When using an iron-list it works as expected, while with vaadin-grid the scrolling does not affect the layout.

Is this expected, and is there a way to use the app-header-layout scrolling features with vaadin-grid?

[jouni]

This would need the “delegated scrolling” feature from iron-list. I don’t think anyone has tried how easy it would be to accomplish. But I agree it would be a very useful feature.

[heruan]

I've changed the title of this issue since it's not only related to app-header-layout but basically any layout when you want to make the app scroll and not only the grid.

Take a grid in vaadin-app-layout for example: in a small device the space for the grid might be not sufficient and you have a small part of the screen to scroll the grid, while if the scrolling were delegated to the app layout itself one would be able to scroll the entire grid which would fit the entire screen while scrolling and be a lot more visible/usable.

[Legioth]

Another implication of delegating scrolling to an outer context is that the rows to fetch and render into the DOM would be based on what's actually visible. This is especially important if height-by-row is used.

[heruan]

Thank you @Legioth! I didn't realize the two issues were related. Seems like this is hitting me by two sides 😅

[heruan]

Any update on this? Since iron-list natively support this (it's the default), can vaadin-grid inherit also that feature from it?

[heruan]

Still hope to have some feedback on this! Having a fixed height does not fit with modern apps where all the content "flows" (e.g. dynamic headers/footers, etc.)

[mvysny]

This pattern of hiding the menu bar while scrolling the contents is very common with Android native apps, and it would be great to have such support for Vaadin Grid as well. Alternatively an example which would perhaps add/remove pointer-events:none; to Vaadin Grid as the parent layout is scrolled would be much appreciated.

[mvysny]

Alternatively you could try https://vaadin.com/directory/component/noscrollgrid-flow-addon

[heruan]

Alternatively you could try vaadin.com/directory/component/noscrollgrid-flow-addon

Already tried that, it has other issues and the feeling is that components from the Vaadin Component Factory suffer a pretty much dead lifecycle, not the highest-level code quality, plus contributions are ignored there.

Also, a new component for a feature like this seems overkill 🙂