Controlling Scroll Behavior

When there's lots of content, details appear that affect site feel (interface convenience).

1. overscroll-behavior

Have you ever scrolled a modal window to the end, and suddenly the page underneath started scrolling? This is called " Scroll Chaining " .

• overscroll-behavior: contain: Stops scrolling only on current element.

2. scroll-padding

If you have a fixed site header and click an anchor link (#section), the section header might hide under the header.

html {
  scroll-padding-top: 80px; /* Accounts for your header height when scrolling */
}

3. scroll-snap-type

Allows creating " flippers " (carousels) that snap to edges. Pure CSS without JS!