Search code examples
vaadinvaadin8

How to make UI receive scroll events


In my vaadin application I need to implement a fixed header, that changes size depending on the scroll position of the UI.

While there are geters for scroll position in Vaadin 8, there seems to be no functionallity implemented to listen for scroll events. So I tried to implement a JavaScript connector, that just informs the server-side UI, that the user has scrolled, so the server-side UI can then notify the Header as a scrollListener.

So far thats what I planned, but I just can't find out, how to implement my connector in a way that it.

  1. is active after the site got requested by a Client.
  2. is able to call my server-side UI.onScrollEvent() method.

Does anyone know, how the described behavior could be implemented?

Thank you for your help in advance.


Solution

  • I have done this once few years ago by extending the layout component that wrapped the part of UI where I needed this. In GWT there is gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/… which can be used in DOM handler. So yes, GWT provides suitable client side event. I then used RPC call to server side, where I triggered the corresponding server side event, which I could listen in other parts of the app. The code is not public, but there is LazyLayout add-on that has similar type of implementation, which you could check as reference for your implementation.

    https://github.com/alump/LazyLayouts/blob/master/lazylayouts-addon/src/main/java/org/vaadin/alump/lazylayouts/client/LazyVerticalLayoutConnector.java