Scroller how to detect onScrollFullyDown ?

Flow
1

I would like to achieve a bit the same behavior that we can find in facebook. More you scroll down more it loads content. In order to achieve that I created a Scroller but I see no way to register anything.

Tried also: `scroller.getElement().addEventListener(“scroll”, event → Sout(event)); but… nothing happens never there… any help ? Thank you

2

Probably not 100% the same but using Virtual List could result in a more maintainable solution in the long run https://vaadin.com/docs/latest/components/virtual-list

3

Ok but this is more a workaround.

4

I tested the fairly new Scroller component for the first time and I was quite surprised there are no Java methods to track scrolling to the end, not to mention tracking scrolling at all.

5

Did you add feature requests already, I’d be happy to thumb up and advocate them directly to the team?

6

https://github.com/vaadin/flow-components/issues/1160 here is a old one

7

Here is how I just hacked in the feature. I don’t suggest to use it like this, but extract the code to some helper class:

    Scroller s = new Scroller() {
        
        {
            getElement().executeJs(

“”"
var self = this;
this.addEventListener(“scroll”, function(e) {
if(self.scrollTop + self.clientHeight == self.scrollHeight) {
self.$server.onScrollToEnd();
}

});

“”");

        }
        

        @ClientCallable
        public void onScrollToEnd() {
            System.err.println("On scroll to end");
        }
    
    };
    
    
    
    VerticalLayout vl = new VerticalLayout();
    
    for(int i = 0 ; i < 100; i++) {
        vl.add(new Span("Row" +i));
    }
    s.setContent(vl);
    
    s.setHeight("300px");
    
    // A trivial scroll listener 
    DomListenerRegistration reg = s.getElement().addEventListener("scroll", (DomEvent de) -> {
        System.err.println("Hello scroll event:" + de.getEventData().getNumber("event.target.scrollTop"));
    });
    reg.debounce(100); // use reasonable debouncing
    reg.addEventData("event.target.scrollTop");
    
    add(s);
8

@quirky-zebra But isn’t that to actually scroll to some specific location, rather than listening to scroll events?

9

And yes, those should be there as well.

10

True :slightly_smiling_face: scroll events had no specific one

11

And should be fairly easy to implement too.

12

Hmm. Maybe I’ll add a prototype to Viritin :thinking:

13

Hi @quintessential-ibex I didn’t I wanted first to get sure I wasn’t looking the wrong way (I’m beginner with Vaadin)

Allright sure I could open a ticket about that :slightly_smiling_face:

14

@quintessential-ibex here it is: https://github.com/vaadin/flow/issues/14914

I will try to use your suggestion in the mean time thank you very much!

15

This workaround work pretty well thank you I just have now an issue with the height:

16 
//    s.setHeightFull(); // <--- is not supported
    s.setHeight("300px"); // works fine
17

I get I would need somehow to retrieve the full height and set it with setHeight right after manually

18

Full height is from the “available height” in the parent component. So your parent component should have a fixed height our all parent components should have 100% height.

19

This and couple of other enhancements to Scroller component now (or technically as soon as Maven central updates are on all servers) available as VScroller extension in Viritin 1.5.2 (in.virit:viritin:1.5.2).