How to use element.scrollIntoView as a promise or observable?

Question

I'm using

tab_element.scrollIntoView({
        behavior:'smooth',
        block: 'center',
});

to scroll the element at the center
but immediately after this, I need to call router.navigate
This is causing the scroll to be interrupted,
so my solution is to do the navigation after the scrolling is finished.
Is there a way that I can get a promise or an observable which can be used to call a function after scroll completes?

Can you add a snippet to your question? – Lajos Arpad Sep 15 '22 at 10:17 — Lajos Arpad, Sep 15 '22 at 10:17

Luckylooke · Answer 1 · 2022-06-05T16:06:57.440

1

I did not find solution so far There is no native option to get any callback after scroll finishes.. you can only find solutions which hooks on scroll event like this one https://stackoverflow.com/a/51142522/861615

Maybe in few years: https://github.com/w3c/csswg-drafts/issues/3744 ‍♂️

edited Jun 05 '22 at 16:06

answered Jun 05 '22 at 15:59

Luckylooke

4,061
4
36
49

Was looking for solution for similar problem for my site at https://teipublisher.info/exist/apps/TraveLab/TrilingualTravelab2022-6-13.xml. If I use behavior:'smooth, only one window is synchronized. Hoping this page will be updated with a solution... – GilShalit Jun 23 '22 at 13:31

score 1 · Answer 2 · answered Sep 08 '22 at 22:00

1

You can check if the window.scrollY is equal to element.offsetTop :

    function myFunction() {
        const checkEvery = 600;
        const element = document.getElementById('id')


        setTimeout(() => {
            if (window.scrollY === element.offsetTop) { 
                // your code
            } else test();
        }, checkEvery);
    }

    myFunction();

answered Sep 08 '22 at 22:00

Sadra Yavar

11
1

This should be setInterval right? – Federico Peralta Mar 29 '23 at 19:58

How to use element.scrollIntoView as a promise or observable?

2 Answers2