Scrolling to view - Vaadin 14.4.4

Flow
1

Hi !

I’m trying to scroll to a component but in a smooth way. I’ve searched on all vaadin Threads but i found only one thing that kinda work.

MyComponent.getElement().callFunction(“scrollIntoView”);

Only this method is working for me (Executing Js with the element in parameter or trying to put IDs on element and reach them don’t work and end up with same results)

The thing is, if I replace “scrollIntoView” by “scrollIntoView({behavior: "smooth"})” to get a smooth and not a direct scroll, it does the work but I have an error popping, that’s weird because the function is doing the work.

Also a weird part is that i have the same error when i try to execute some other js code by example (In this case nothing happens):
https://vaadin.com/forum/thread/17436095/scroll-to-view
or
https://vaadin.com/forum/thread/17535336/scrollintoview-in-vaadin-10

I guess it might be a problem with my JS, but I can’t solve the issue. Hope someone could help me and find out how to solve this !
18501221.png

2

You can try this:

Button scrollTo = new Button("scrollTo");
        scrollTo.addClickListener(e -> {
            yourcomponent.getElement().executeJs(
                "$0.scrollIntoView({behavior: \"smooth\", block: \"end\", inline: \"nearest\"});", yourcomponent.getElement());
        });

This scrollIntoView({behavior: "smooth"}) is not working because it expect a functionName with arguments.

In your case your argument is an object:

        Button scrollTo = new Button("scrollTo");
        scrollTo.addClickListener(e -> {
            JsonObject arg1 = Json.createObject();
            arg1.put("behavior", "smooth");
            yourcomponent.getElement().callJsFunction("scrollIntoView", arg1);
        });
        add(scrollTo);
3

It works perfectly Thanks ! Hope this will also help some other people !