VScroller ScrollEvent not working

I’m working with the VScroller from Flow Virtin to make an infinite scrolling view.
The VScroller is created like this: var scroller = new VScroller(someOrderedList, Scroller.ScrollDirection.VERTICAL);
and then added to the View which extends from a Div.

My Layout is a simple: Header ↔ Main Content (View) ↔ Footer

If I move the <vaadin-scroller> html tag below the <flow-container-root> the scroll listener is being called, but not when deeply in the view.

(There is one scrollbar for the whole page, when moved as a child to the flow-container-root there’s seperate one for the ordered list, which then works)

Hi! I’ don’t perfectly understand what you are trying to accomplish, but the VScroller is good only for views where you have a sticky footer/header and wan’t the infinite scrolling to happen within a portion of your UI. If you want just a single scrollable area to your web page, check this example and WindowScroller instead: flow-viritin/src/test/java/org/vaadin/firitin/WindowInfiniteScrollingExample.java at v23 · viritin/flow-viritin · GitHub

Hey :slightly_smiling_face: I have a sticky header which moves while scrolling but a non-sticky footer. I basically want to have a List of some Items in the Main Content Area which load via the infinite scrolling. But when adding the component to the view (which is added to the tag between header and footer), no scrolling events are called. If I then move the vaadin-scroller in the html via the Chrome Dev Tools far up in the tree hirachie, I do get the events called instantly. I think I got something wrong with the Composition of the Components. Would sharing some code help?

That for sure might help!

So I have a View which extends a Div, which has a search bar similiar to the new Vaadin Directory and a Results List like this:

private void initResults() {
    this.results = new OrderedList();
    this.results.setHeightFull();
    this.results.addClassNames(
            Padding.Top.MEDIUM,
            Display.GRID,
            Gap.MEDIUM
    );
    this.results.getStyle().set("grid-template-columns", "repeat(auto-fill, minmax(280px, 1fr))");

    var scroller = new VScroller(this.results, Scroller.ScrollDirection.VERTICAL);
    scroller.setHeightFull();
    scroller.addScrollToEndListener(event -> {
        // check if we have more data
        if (!this.hasMore)
            return;
        this.currentPage++;
        this.loadResults(false);
    });
    this.add(scroller);
}

This is called in the constructor of the view.

The view has the following styles (if they matter):

// add styling
this.addClassNames(
        Margin.Horizontal.AUTO,
        MaxWidth.SCREEN_XLARGE,
        Padding.Horizontal.MEDIUM,
        Padding.Vertical.LARGE
);

The view is, as I said, wrapped in a RouterLayout that consists of a header, main and footer tag. The view is obviously added to the main element.

Would that help, or am I missing something important?

When giving the parent element of the scroller a height of 100vh instead of 100% it works, but I get a seperate scrollbar which moves seperately which I don’t want :frowning_with_open_mouth:

So it seems like the Scroller doesn’t actually uses it from the whole page, but rather from the element, is there a way to change that behaviour?

Any chance to share a reduced example in GitHub or some other way? It would take a while to code the setup…

Whenever using 100% height, the problem is that it is only from the parent component that is providing that height. So the parent needs to have explicit height or all parent elements need to have 100% height defined somehow.

Hey, sorry for not coming back to you. I think my issue is just the component composition and wrong usage of styling. I think I’d consider to try some more out on my own, but thank you for your input already! :slightly_smiling_face: