CSS about scroll

Collections

• Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.

Preventing Scroll “Bounce” with CSS

:root {
  overscroll-behavior: none;
}

CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study

.slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  > * {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  padding-inline: var(--offset-width);
  scroll-padding-inline-start: var(--offset-width);
}

6 CSS snippets every front-end developer should know in 2023

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

Chill Scroll Snapping: Article Headers

html {
  scroll-snap-type: y mandatory;
}

main {
  h2,
  h3 {
    scroll-snap-stop: normal;
    scroll-snap-align: start;
  }
}

main {
  max-width: 60ch;
  margin-inline: auto;
  h1,
  h2,
  > h1 + * {
    scroll-snap-stop: normal;
    scroll-snap-align: start;
  }
  > h1 + *,
  h2 {
    scroll-margin-block-start: 0.5rem;
  }
}

html {
  scroll-snap-type: y mandatory;
}

12 Modern CSS One-Line Upgrades

• Stable Enhancements: accent-color, scroll-margin-top/bottom
• progressive enhancement: overscroll-behavior: contain, scrollbar-gutter
• https://news.ycombinator.com/item?id=39176717

scroll-margin-top/bottom

I like to include a generic starting rule in my reset for any element with an [id] attribute given it has the potential to become an anchor link.

[id] {
  scroll-margin-top: 2rem;
}