Vaadin horizontal scroll on mouse wheel

user_12704240 0
Viewed 223

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?

vaadin14 vaadin-flow vaadin-grid vaadin
1 Answers

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