diagnostic · one of 36 free, no counter

Scrolling

Q: Why does my sticky header not stick?

Almost always because an ancestor has an overflow other than visible, which makes it the scroll container the header sticks inside. The list names the ancestor.

Q: What is an unintended scroll container?

One created as a side effect - overflow: hidden to hide a horizontal scrollbar, or overflow: auto on a wrapper. They behave exactly like intentional ones, which is the problem.

Q: Does it show scroll-snap?

Yes, with the axis and the strictness. A mandatory snap on a container taller than the viewport is the reason some pages cannot be scrolled a little.

Which element is actually scrolling - and why is it sticky?

An overflow: hidden that was added to stop a horizontal scrollbar creates a scroll container, and from then on position: sticky inside it sticks to that container rather than to the viewport. This lists every container on the page with what created it, which is the answer to most of the sticky bugs nobody can reproduce in isolation.

Reach it Press ⌘ + K on any tab and type scrolling. Ctrl + K on Windows and Linux

Every sticky, snapping and scrolling container on the page, named

reads computed overflow, position and snap properties

writes nothing

sends nothing

finds scroll containers, sticky elements, snap points

clipping reported per container

unintended listed with what created them

plan free

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

in the panel · free, no counter

section#about

What this actually is

every scroll container, including the ones you did not mean

When something sticky does not stick, when a scroll ends somewhere unexpected, or when a page has two scrollbars. Also worth a look on any page where overflow has been used to solve a layout problem.

section#asked

Asked about this diagnostic

4 of them

Why does my sticky header not stick?

Almost always because an ancestor has an overflow other than visible, which makes it the scroll container the header sticks inside. The list names the ancestor.

What is an unintended scroll container?

One created as a side effect - overflow: hidden to hide a horizontal scrollbar, or overflow: auto on a wrapper. They behave exactly like intentional ones, which is the problem.

Does it show scroll-snap?

Yes, with the axis and the strictness. A mandatory snap on a container taller than the viewport is the reason some pages cannot be scrolled a little.

Is scroll behaviour part of this?

Smooth scrolling is reported where it is set. Whether it should be is a Preferences question - a page that ignores reduced motion is a finding there.

how to use scrolling

Open Scrolling to list every scroll container on the page, with what created each.
Read the unintended ones first: an overflow: hidden added to hide a scrollbar creates one.
A position: sticky inside a container sticks to that container rather than to the viewport.
Check the clipping reported per container, and the snap points beside them.

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

70 of these · no host permissions · three free audits