鼠标滚轮上的 Vaadin 水平滚动

Question

我使用 Vaadin 网格，它有很多列 (50) 而只有一些行 (10)。默认情况下，当用户使用鼠标滚轮时它会垂直滚动，这在这种情况下是不需要的。

在 Vaadin 中是否有内置的方法来实现鼠标滚轮的水平滚动？

Answer 1

应该可以使用 JS 调用。例如，对于 V14 网格，

Grid<String> grid = new Grid<>();
grid.setItems(Arrays.asList("one", "two", "three"));
grid.removeAllColumns();

for (int i = 0; i < 50; i++) {
    grid.addComponentColumn(Span::new);
}

grid.getElement().executeJs("let grid = [=10=];"
        + "let scroller = grid.$.scroller;"
        + "scroller.addEventListener('mousewheel', scrollHorizontally, false);"
        + "scroller.addEventListener('DOMMouseScroll', scrollHorizontally, false);"
        + "function scrollHorizontally(e) {"
        + "        e = window.event || e;"
        + "        let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));"
        + "        grid._scrollLeft -= (delta * 40);"
        + "        e.preventDefault();"
        + "    }", grid);

鼠标滚轮上的 Vaadin 水平滚动

Vaadin horizontal scroll on mouse wheel

vaadin

vaadin-grid

vaadin-flow

vaadin14