Script's webflow side effect with native CSS

Design help General
1

Hello there,
After support, they don’t know the best way to solve it.

When you use a link that scrolls to a section, this feature, is implemented with the script’s webflow, has a side effect on the native CSS scroll-margin or scroll-snap.

Check out the demo here how it doesn’t work:
https://preview.webflow.com/preview/example-apple-iphone?utm_medium=preview_link&utm_source=designer&utm_content=example-apple-iphone&preview=e5a27f982344d1d65156b8a2bbc9afb9&pageId=66bbe76aab464d59bf5c4e4c&locale=en&workflow=preview

Does anyone know what the best way to solve this?

It’s incredible that Webflow doesn’t resolve the issue as soon as possible to preserve the semantics and native functionality of HTML and CSS.

2

If you link directly using the hash ( no click ) do you see the scroll-margin-top you’re looking for?

Bug by Webflow

If so, try using a URL link with the ID directly, rather than using the Page Section link type. Try variations… #hash, /path#hash etc, and check the published site.

If that doesn’t achieve what you want, sometimes I install my own click event handler for nav links using script, which intercepts those events and scrolls to the position I want, with the offset I specify.

3

It isn’t achieved because the objective is to click on the link to scroll down.

If you try to change the position with JavaScript, unfortunately, it doesn’t work because of the script’s webflow.