I have set up keylisteners in Vaadin to use the arrow keys for specific tasks. Because of this I can't use the arrow keys for scrolling the page, so I set up keylisteners to ctrl+arrow to do this function. Now I currently use a JS function call to do the scrolling:
window.Scroll = {
scroll: function(amount, idOfWrapper){
var element = document.getElementById("container-of-" + idOfWrapper);
element.scrollBy({top:amount, behavior: 'smooth'});
}
}
The problem that I have is that this does not let me continously scroll the page, because of the smooth scroll behavior (which i need to have). How could I make this possible?
Java code:
ShortcutEventListener listener = event -> {
...
} else if(event.matches(Key.ARROW_DOWN, KeyModifier.CONTROL)) {
UI.getCurrent().getPage().executeJs("Scroll.scroll($0, $1)", scrollAmount,
idOfWrapper);
} else if(event.matches(Key.ARROW_UP, KeyModifier.CONTROL)) {
UI.getCurrent().getPage().executeJs("Scroll.scroll($0, $1)", scrollAmount, idOfWrapper);
}
};
...
UI.getCurrent().addShortcutListener(listener, Key.ARROW_DOWN, KeyModifier.CONTROL);
UI.getCurrent().addShortcutListener(listener, Key.ARROW_UP, KeyModifier.CONTROL);
Not an answer to your question, but rather some friendly advice. I want to note that trying to reproduce native scrolling behavior with your own code leads down a deep rabbit hole that could result in all sorts of edge-cases and browser specific issues. Besides changing the scroll behavior to arrow key + modifier is very unintuitive, no user is going to figure this out.
If I would have to support native keyboard scrolling, I would not mess with the normal arrow keys. Instead I would consider using different shortcuts for my custom navigation (e.g. arrow keys + modifier). Then add a help text to the navigatable element for users to be aware of them. Alternatively I would check if the requirements can be changed, so that the shortcuts only trigger when the user has focused the specific element that should support navigation.