pelicin › web › CSS

Overflow and Overscroll

Overflow properties set what happens if an element's content doesn't fit its container.

Overscroll properties, on the other hand, set the "scroll overflow" behavior for the element. This includes behaviors like:

  • "scroll chaining" (the behavior that when you get to the end of a scrolling area, and keep scrolling, then the parent's scrolling area will start scrolling too),
  • "bounce" effects (when you hit the top or the bottom of the page), and
  • "pull to refresh" behavior.

Overflow Properties

overflow

Shorthand for overflow-x and overflow-y.

You can specify up to two values, one for each axis (if you specify only one value, it will be used for both axes):

  • visible — Render the overflow outside the padding box (clip).
  • hidden — Clip the content to fit the padding box. Cannot be scrolled, except programmatically (e.g. by using element.offsetLeft in JavaScript).
  • clip — Clip the content to fit the padding box. Cannot be scrolled, even programmatically. (Looks similar to hidden.)
  • scroll — Always display scrollbar.
  • auto — Display scrollbar when necessary. (Depends on the browser.)
.container {
  overflow: <overflow-x> <overflow-y>;
  overflow: <overflow-x-and-y>;
}
| LIVE PREVIEW

When content overflows:

visible
hidden
scroll
auto

When content fits:

visible
hidden
scroll
auto

overflow-x

Sets the overflow behavior for the x-axis (horizontal).

overflow-y

Sets the overflow behavior for the y-axis (vertical).

Overscroll Properties

overscroll-behavior

Shorthand for overscroll-behavior-x and overscroll-behavior-y.

You can specify up to two values, one for each axis (if you specify only one value, it will be used for both axes). Note that this property is inherited; e.g., if you specify none on the parent, then all of its children will have the value of none too.

  • auto — default overscroll behavior (default)
  • contain — no "scroll chaining" to the parent's element, but allow other overscroll behaviors (e.g. "bounce" effects or "pull to refresh")
  • no — no "scroll chaining" behavior, and disable other overscroll behaviors (e.g. "bounce" effects or "pull to refresh")

overscroll-behavior-x

Sets the overscroll behavior for the x-axis (horizontal scrolling).

overscroll-behavior-y

Sets the overscroll behavior for the y-axis (vertical scrolling).

Obscured Properties

overflow-inline

Sets the overflow behavior for the inline direction.

(Which direction this is depends on writing-mode. Normally refers to the horizontal axis when you write horizontally.)

overflow-block

Sets the overflow behavior for the block direction.

(Which direction this is depends on writing-mode. Normally refers to the vertical axis when you write horizontally.)

overflow-anchor

Sets the browser's "scroll anchoring behavior" (the behavior that automatically adjusts the scroll position to minimize content shift when the content outside the viewport changes).

Possible values:

  • auto — The element can be selected as an anchor when adjusting scroll position (default).
  • none — The element won't be selected as an anchor when adjusting scroll position. (Normally only required if you are experiencing problems with scroll anchoring in the document or part of the document, and you need to turn it off.)

overscroll-behavior-inline

Sets the overscroll behavior for the inline direction.

(Which direction this is depends on writing-mode. Normally refers to the horizontal axis when you write horizontally.)

overscroll-behavior-block

Sets the overscroll behavior for the block direction.

(Which direction this is depends on writing-mode. Normally refers to the vertical axis when you write horizontally.)

References