Mooshio Posts - Answer Overflow

Mooshio

•Created by Mooshio on 6/15/2024 in #front-end

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

1 replies

KPCKevin Powell - Community

•Created by Mooshio on 6/13/2024 in #front-end

Moving Elements in a Sticky Header

I have a header that has two rows of content. When the user scrolls down the page, I want to collapse the second row and then move the search bar and Component B up to the first row. Is this possible with CSS only? If not, what I'll probably do is just add them in both rows and then show/hide them depending on if the header is collapsed. CodePen: https://codepen.io/mandy-h/pen/qBGVpxK

9 replies

Gaming

Programming