Vaadin horizontal scroll on mouse wheel

Question

I use a Vaadin Grid which has many columns (50) and only some rows (10). By default it scrolls vertically when the user uses the mouse wheel which is not desired in this scenario.

Is there a built in way to achieve horizontal scrolling on mouse wheel in Vaadin?

Answer 1

Should be doable using a JS call. For example, for a V14 Grid,

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