2

At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.

This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.

This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/

I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.

Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan

When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.

Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.

Thanks a lot :)

TigrouMeow
  • 3,669
  • 3
  • 27
  • 31

2 Answers2

3

scroll-margin is not useful if scroll behavior is controlled by JS

Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).

It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.

What to do?

I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.

Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
  • 1
    Exactly, that was the issue and I didn't notice! I fixed it by simply removing the plugin, and I create the table of content on my own (actually, there is even a PHP library that does this: "caseyamcl/toc"). Thanks a lot :) – TigrouMeow Jun 13 '22 at 08:43
2

I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.

scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.

Sometimes we see some text gets cut from the viewport such that it's half visible.

enter image description here

To avoid that kind of thing scroll-margin-top is helpful.

when no scroll event happens: when no scroll event happens when scroll event happens but with scroll-padding-top:20px; enter image description here

see an example from MDN Web Docs

Now applying this logic to your link example

When we click on the link it takes us to the specified div, enter image description here But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element: enter image description here

When we apply scroll-margin-top we get the desired output on the link click event or scroll event: enter image description here 

a{
  font-size:30px;
  text-transform:capitalize;
}
#down{
  scroll-margin-top:30px;
  background-color:royalblue;
  height:100px;
  width:50%;
}
<center>
<a href="#down">down</a>

<section style="height:1000px;"></section>

<div id="down"></div>

<section style="height:1000px;"></section>
  
</center>

See Output

Correct me if I am wrong anywhere.

Nishant Jadhav
  • 427
  • 4
  • 15