Why is it that NextJS cannot auto-scroll when there are fixed elements on the page?

[p1ckle-rick]

Summary

I have a fixed navbar and get the following warning:

Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element:

The warning is gone if I set scroll={false} as per the docs.

However, I am not sure I understand why NextJS cannot auto-scroll when there are fixed elements on the page?

[Icegreeen]

Summary

I have a fixed navbar and get the following warning:

Skipping auto-scroll behavior due to `position: sticky`
or `position: fixed` on element:

The warning is gone if I set scroll={false} as per the docs.

However, I not sure I understand why NextJS cannot auto-scroll when there are fixed elements on the page?

The reason why Nextjs cannot perform auto-scroll when there are fixed elements on the page is related to how the position: fixed and position: sticky work in css.

When an element is fixed (position: fixed) or sticks (position: stricky) to the browser window, it is taken out of the normal flow of the HTML document. This means it doesn't take up space in the page layout and doesn't contribute to the visible content height in the browser window.

As a result, when Next attemps to perform auto-scroll to a specific element on the page, it cannot accurately calculate the position of the fixed or sticky element relative to the browser window. This can lead to unpredictable or inappropriate auto-scroll behavior.

[p1ckle-rick]

But it should still be able to scroll to the top of the page, it just shouldn't be able to scroll to elements that are fixed or sticky?

Not sure why there is a warning if I am not trying to scroll to a fixed or sticky element.

[sonyarianto]

I wrap the fixed/sticky with

and problem gone, is that a good solution?

[ivan-kleshnin]

I wrap the fixed/sticky with

Wrap with what?

[sukh-gill]

I wrapped it my element in a <div> block and the warning was removed after.

[r-sp]

in my case i was getting the same warning because i had a modal with parallel routes, then the problem went away by adding scroll={false} prop in Link component