Kevin Powell - Community•7mo ago

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);
// }

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);
// }

Kevin Powell

YouTube

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...

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 ...

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Difference between scroll-margin and scroll-padding