如何让 UI 接收滚动事件 [英] How to make UI receive scroll events

问题描述

在我的 vaadin 应用程序中，我需要实现一个固定的标题，它会根据 UI 的滚动位置改变大小.

虽然 Vaadin 8 中有用于滚动位置的 geters，但似乎没有实现用于侦听滚动事件的功能.所以我尝试实现一个 JavaScript 连接器，它只通知服务器端 UI，用户已经滚动，因此服务器端 UI 可以将 Header 作为 scrollListener 通知.

到目前为止，这就是我的计划，但我不知道如何以它的方式实现我的连接器.

1. 在客户请求网站后处于活动状态.
2. 能够调用我的服务器端 UI.onScrollEvent() 方法.

有人知道如何实现所描述的行为吗?

提前感谢您的帮助.

解决方案

几年前，我通过扩展布局组件来解决此问题，该组件包含我需要的 UI 部分.在 GWT 中有 gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/... 可以在 DOM 处理程序中使用.所以是的，GWT 提供了合适的客户端事件.然后我使用 RPC 调用到服务器端，在那里我触发了相应的服务器端事件，我可以在应用程序的其他部分侦听.代码不是公开的，但有一个 LazyLayout 插件具有类似的实现类型，您可以检查它作为您实现的参考.

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

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.

解决方案

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

这篇关于如何让 UI 接收滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！