鼠标滚轮上的 Vaadin 水平滚动答案

【问题标题】：Vaadin horizontal scroll on mouse wheel鼠标滚轮上的 Vaadin 水平滚动
【发布时间】：2021-06-24 06:43:17
【问题描述】：

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

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

【问题讨论】：

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案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 = $0;"
        + "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);

【讨论】：