CODEWITHSUNDEEP
angularscrolltojs-scrollintoview
Finn
Finn

Reputation: 1459

angular scrollIntoView() fine-tuning distance

Angular can slide to the top of the specified element, as shown below:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

However, due to layout issues, if the css sticky attribute is at the top:0, it may block the element. I hope to adjust the scroll to the top position of the element(Like top:100px).

I try to using window.scrollTo or window.scroll, but it seem not work in angular:

    let scrollY =  el.getBoundingClientRect().top + 100;
    window.scrollTo({
        top: scrollY,
        behavior: 'smooth', 
      });

Upvotes: 0

Views: 89

Answers (1)

uruk
uruk

Reputation: 1326

Your code should work fine. To make the page scroll smoothly to the desired position, add scroll-behavior: smooth; to your css:

html {
    scroll-behavior: smooth;
}

Now you can scroll to a desired position with window.scrollTo( y ), where y includes an offset you need.

Don't use scrollIntoView() in this case.

Upvotes: 0

Related Questions