Combining position: sticky; with overflow: scroll;

Written by Bram.us - - Aggregated on Tuesday March 12, 2019
Tags: elsewhere, css, link, sticky

Figure: position: sticky; and overflow: scroll;, a quirky combination … but it can be fixed!

Dannie Vinther:

Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.

When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.

The solution is to use two scrollcontainers and sync up their scrolling using a tad of JavaScript:

See the Pen Position Sticky Table with overflow by Dannie Vinther (@dannievinther) on CodePen.

position: stuck; — and a Way to Fix It →
syncscroll (GitHub) →

Not familiar with position: sticky;? Check out this introduction then.

Related:


« CraftQL – A drop-in GraphQL server for … - Bram.us

Bram.us - Aladdin Trailer »