Kevin Powell - CommunityKP-C
Kevin Powell - Communityā€¢2y ago
Mooshio

Difference between scroll-margin and scroll-padding

Building on top of the sticky header I asked about a few days ago, I was wondering what the difference is between scroll-margin-top and scroll-padding-top. Which one should I use?

I watched this video from Kevin, where he adds scroll-padding-top to the html tag. https://www.youtube.com/watch?v=iGUSTyG-CYw
The comments on this StackOverflow answer suggest adding scroll-margin-top to the :target selector. https://stackoverflow.com/a/55683966

In this CodePen, https://codepen.io/mandy-h/pen/BaemOab, I've found that scroll-padding-top works as expected when added to the html selector, but not on the :target selector. And scroll-margin-top works for the :target selector, but not the html selector. You can comment/un-comment out these lines to see what I mean. I thought it it had something to do with the fact that paragraphs have margins on them, but the behavior is the same when I jump to a <p> or <div>.
html {
  // This doesn't work
  // scroll-margin-top: var(--scrollPadding);
  
  // This works
  scroll-padding-top: var(--scrollPadding);
}

// :target {
//   // This works
//   scroll-margin-top: var(--scrollPadding);
//  
//   // This doesn't work
//   // scroll-padding-top: var(--scrollPadding);
// }
YouTubeKevin Powell
Stop fixed navigations covering content on scroll
When we have a fixed navigation with anchor links that go to different locations within the page, that navigation can cover content when it scrolls to that location on the page. Luckily, it's easy to fix with some scroll-padding!

šŸ”— Links
āœ… The CodePen: https://codepen.io/kevinpowell/pen/GRQyZMX
āœ… More position sticky stuff: https://youtu.be/8T...
Stop fixed navigations covering content on scroll
Stack Overflow
Fixed page header overlaps in-page anchors
If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height:
Is there a way to use the URL anchor (the #fragment part) to have the browser scroll to a certain point ...
Fixed page header overlaps in-page anchors
Was this page helpful?