Rubber-Banding Gets a CSS Makeover

That bouncy overscroll effect familiar to mobile users — Apple’s patented “rubber-banding” — has inspired a fresh CSS technique for any container, not just mobile viewports. Philip Braunen shared the approach with Smashing Magazine, and it raises a sticky question: how do you keep headers and footers pinned to container edges while everything else stretches?

Braunen’s solution inserts an extra div ahead of the header to enable the effect. But for cleaner markup, pseudo-elements can serve the same role without adding nodes. The result: rubber-band behavior you can apply to any scrollable container while preserving sticky positioning.