Vaadin中Ctrl+箭头平滑滚动无法支持连续触发的解决方案咨询

问题根源 #

原有方案无法实现长按连续滚动的核心原因有两个：

1. Vaadin快捷键监听器默认仅在每次按键触发（包括长按重复触发）时调用一次JS滚动方法，每次调用scrollBy带smooth参数都会重新启动平滑动画，前一次的滚动动画会被直接打断，无法形成连续效果
2. 每次从Java侧调用JS存在固定通信延迟，长按重复触发的间隔不稳定，进一步放大了滚动卡顿的问题

解决方案 #

核心思路是把连续滚动的调度逻辑放到前端JS侧实现，Java侧仅负责通知前端「开始滚动」和「停止滚动」的信号，避免跨端通信影响滚动连续性。

1. 替换前端JS代码 #

window.Scroll = {
    // 存储滚动定时器实例
    scrollTimer: null,
    // 启动连续滚动：stepAmount正数向下滚，负数向上滚
    startScroll: function(stepAmount, idOfWrapper) {
        // 避免长按重复触发keydown导致重复创建定时器
        if (this.scrollTimer) return;
        const element = document.getElementById("container-of-" + idOfWrapper);
        // 给容器统一设置平滑滚动属性，也可以直接写在CSS里
        element.style.scrollBehavior = 'smooth';
        // 30ms滚动一次，可根据需求调整间隔和步长平衡速度与顺滑度
        this.scrollTimer = setInterval(() => {
            element.scrollBy({top: stepAmount, behavior: 'smooth'});
        }, 30);
    },
    // 停止连续滚动
    stopScroll: function() {
        if (this.scrollTimer) {
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
        }
    }
}

2. 修改Java侧快捷键监听逻辑 #

需要分别监听按键按下（启动滚动）和按键抬起（停止滚动）两个事件：

// 自定义滚动步长，可根据需求调整
private static final int SCROLL_STEP_DOWN = 15;
private static final int SCROLL_STEP_UP = -15;
// 替换为你的业务容器id
private String currentWrapperId = "your-wrapper-id";

// 按键按下监听器：启动滚动
ShortcutEventListener keyDownListener = event -> {
    if(event.matches(Key.ARROW_DOWN, KeyModifier.CONTROL)) {
        UI.getCurrent().getPage().executeJs("Scroll.startScroll($0, $1)", SCROLL_STEP_DOWN, currentWrapperId);
        event.preventDefault();
    } else if(event.matches(Key.ARROW_UP, KeyModifier.CONTROL)) {
        UI.getCurrent().getPage().executeJs("Scroll.startScroll($0, $1)", SCROLL_STEP_UP, currentWrapperId);
        event.preventDefault();
    }
};

// 按键抬起监听器：停止滚动
ShortcutEventListener keyUpListener = event -> {
    if(event.matches(Key.ARROW_DOWN, KeyModifier.CONTROL) || event.matches(Key.ARROW_UP, KeyModifier.CONTROL)) {
        UI.getCurrent().getPage().executeJs("Scroll.stopScroll()");
        event.preventDefault();
    }
};

// 注册按下事件监听器
UI.getCurrent().addShortcutListener(keyDownListener, Key.ARROW_DOWN, KeyModifier.CONTROL);
UI.getCurrent().addShortcutListener(keyDownListener, Key.ARROW_UP, KeyModifier.CONTROL);

// 注册抬起事件监听器
UI.getCurrent().addShortcutListener(keyUpListener, Key.ARROW_DOWN, KeyModifier.CONTROL)
        .listenOn(UI.getCurrent())
        .withEventPhase(ShortcutRegistration.Phase.BUBBLE)
        .withDefaultBehaviour(ShortcutRegistration.DefaultBehaviour.PREVENT_DEFAULT);
UI.getCurrent().addShortcutListener(keyUpListener, Key.ARROW_UP, KeyModifier.CONTROL)
        .listenOn(UI.getCurrent())
        .withEventPhase(ShortcutRegistration.Phase.BUBBLE)
        .withDefaultBehaviour(ShortcutRegistration.DefaultBehaviour.PREVENT_DEFAULT);

优化建议 #

• 可以调整JS中定时器的间隔（当前为30ms）和Java中的滚动步长，适配你需要的滚动速度
• 如果不需要动态修改平滑效果，直接给container-of-xxx容器加CSS属性scroll-behavior: smooth;即可，不用在JS里重复设置
• 如果你的页面存在多个滚动容器，可以在startScroll方法里加个当前滚动容器的判断，避免多个容器同时滚动

内容的提问来源于stack exchange，提问作者BigB84