Vaadin 键盘滚动答案

【问题标题】：Vaadin keyboard scrollingVaadin 键盘滚动
【发布时间】：2021-11-03 09:27:33
【问题描述】：

我在 Vaadin 中设置了按键侦听器，以使用箭头键执行特定任务。因为这个我不能使用箭头键来滚动页面，所以我将 keylisteners 设置为 ctrl+arrow 来完成这个功能。现在我目前使用 JS 函数调用来进行滚动：

window.Scroll = {
scroll: function(amount, idOfWrapper){
    var element = document.getElementById("container-of-" + idOfWrapper);
    element.scrollBy({top:amount, behavior: 'smooth'});
}

}

我遇到的问题是，由于平滑的滚动行为（我需要这样做），这并不能让我连续滚动页面。我怎样才能做到这一点？

Java 代码：

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);

【问题讨论】：

标签： javascript scroll vaadin smooth-scrolling

【解决方案1】：

不是对您问题的回答，而是一些友好的建议。我想指出，尝试使用您自己的代码重现本机滚动行为会导致一个很深的兔子洞，这可能会导致各种边缘情况和浏览器特定问题。除了将滚动行为更改为箭头键 + 修饰符非常不直观之外，没有用户会弄清楚这一点。

如果我必须支持本机键盘滚动，我不会弄乱普通的箭头键。相反，我会考虑为我的自定义导航使用不同的快捷方式（例如箭头键 + 修饰符）。然后将帮助文本添加到可导航元素中，以便用户了解它们。或者，我会检查是否可以更改要求，以便仅当用户关注应该支持导航的特定元素时才会触发快捷方式。

【讨论】：