Scroll-Margin CSS Property (Not Working)

Design help Custom code
1

Hey there!

I have a couple of divs I’m trying to leverage the scroll-margin or scroll-padding CSS property for. Whenever I follow the guidelines it doesn’t work. If I use the CSS from css-tricks in sublime or webflow “scroll-margin” it displays in red font as if an error?

Is anyone able to implement this successfully?

9 Likes
2

Hello!
Did you ever figure this out? I’m trying to get scroll-padding-top to work with anchor links and for some reason it doesn’t work with webflow

2 Likes
3

Hello, did either of you ever resolve this?

I have the same problem: The CSS scroll-margin and scroll-padding properties are broken (or disabled) within Webflow. I’ve tried to implement them via custom code, and also tried via the Custom Attributes field under page/element settings tab, to no effect. Is this a known bug? Are there any workarounds that enable us to activate either of these standard CSS properties? (Context: I’m autogenerating side panel table-of-contents for blog posts with anchor links included, and need the targeted headings to line up below the navbar rather than at very top of screen covered by navbar).

@patina.photo @Kyle_Winton

Thanks!

4

Nope, I didn’t really solve it properly; I was able to hack it to be ‘good-enough’ with a before: element and negative margin.
But I hope webflow fixes whatever bug is making scroll padding/scroll margin not work properly.

5

scroll-margin or scroll-padding support would be really nice to have from Webflow. This would provide an easy to solution to a really annoying problem: jump/anchor links never scroll to the right spot in Webflow sites with fixed top nav. Been spending 2 hours trying to figure out a solution for this.

2 Likes
6

Same problem! Annoying that it doesn’t work with Webflow since my page heavily relies on anchor link navigation.

1 Like
7

Has anyone please found a solution to this? I am so defeated by Webflow, it is just one problem after another…

1 Like
8

Pretty sure you can get by this by disabling webflows smooth scrolling:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  //DISABLE WEBFLOW SMOOTH SCROLL
  $(function() {
      $(document).off('click.wf-scroll');
  });
});
</script>
5 Likes
9

Thank you so much for this! This has been an issue for me on a lot of projects. Do you know if there are any other side effects of this?

Also for anybody else still wanting smooth scrolling on their site: Use CSS in your page or site styles (not as an embed on the page as the designer will get weird with it).

<style>
  html {
    scroll-behavior: smooth;
  }
</style>
1 Like
10

THANK YOU! Created an account to say this snippet is what fixed it for me. I found that once this was in place the linking just worked and I didn’t need to fiddle with any scroll-margin’s. There must be some weird overriding or math in place from Webflow that causes these problems.

1 Like
11

I tried with this code, and it doesn’t solve =(

It’s nice that the javascript by webflow removes behavior native; it conflicts with CSS native. #wtf

12

Everybody vote this feature to solve this bug or issue.
https://wishlist.webflow.com/ideas/WEBFLOW-I-4777?return_to_action=vote_7057567368508933930

13

I pasted it into the “Custom code > Head code” section of the “Site Settings”. Worked perfectly.

Only the “scroll-behavior: smooth;”-property isn’t the same thing like Webflow’s scrolling effect, but I think I can live with that :/

14

This solution disables Webflow’s native smooth-scrolling functionality, then draws from the class’s custom properties to determine the scroll-margin-top.

if this doesn’t work hit me on X: @thomasgrantmacd

STEPS:

1.) In the styles panel for your section (or whatever you want to scroll to), give it a class name, i.e. ‘faq_chapter’

2.) Also in the Styles Panel (at the bottom) add a custom property for the faq_chapter class and set it to ‘scroll-margin-top: 80px’
[This assumes you have a navbar that is 80px in height, adjust as necessary.]

3.) In the settings panel for all the sections with faq_chapter that you want to scroll to, add a unique id (like ‘chapter1’)

4.) In the page settings, add this code in the area that says ‘Before tag’:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  //DISABLE WEBFLOW SMOOTH SCROLL
  $(function() {
      $(document).off('click.wf-scroll');
  });
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    // Get --scroll-margin-top from the custom property
                    const computedStyle = getComputedStyle(target);
                    const customScrollMargin = parseInt(computedStyle.getPropertyValue('--scroll-margin-top')) || 0;

                    // Fall back to scrollMarginTop if no custom property is defined
                    const scrollMarginTop = customScrollMargin || parseInt(computedStyle.scrollMarginTop) || 0;

                    // Calculate the target position with respect to the margin
                    const targetPosition = target.getBoundingClientRect().top + window.scrollY - scrollMarginTop;

                    // Smooth scroll to the adjusted position
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            });
        });
    });
</script>

5.) Ensure that your links are set to scroll and are directed at those section id’s you created (i.e. chapter1, chapter2, etc.)

6.) Publish and test.