Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
scrolling

38 Articles
{
,

}
Image
Direct link to the article Quick Hit #168
chrome scrolling

Quick Hit #168

Chrome 153 (Dev) implements scroll-axis-lock, essentially facilitating diagonal box scrolling.…

Image
Daniel Schwarz on Aug 6, 2026
A row of white bordered squares against a bright magenta background, showing the squares in three stages of scrolling and each becoming solid white as it progresses.
Direct link to the article A First Look at Scroll-Triggered Animations
animation Scroll-Triggered Animation scrolling

A First Look at Scroll-Triggered Animations

Let's poke at the differences between scroll-driven and scroll-triggered animations.
Image
Daniel Schwarz on Jun 19, 2026
Image
Direct link to the article Quick Hit #94
CSS scrolling

Quick Hit #94

A quick warning about overscroll-behavior: contain.

…

Image
Daniel Schwarz on Feb 4, 2026
Image
Direct link to the article Scroll Shadows? Pure CSS Parallax? Game Back On.
background-attachment cross-browser safari scrolling

Scroll Shadows? Pure CSS Parallax? Game Back On.

Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint …

Image
Geoff Graham on Jul 29, 2022
Image
Direct link to the article How to Make a “Raise the Curtains” Effect in CSS
mix-blend-mode scrolling sticky

How to Make a “Raise the Curtains” Effect in CSS

“Raise the curtains” is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position.…

Image
Silvestar Bistrović on Mar 2, 2022
Image
Direct link to the article Scroll Shadows With JavaScript
scrolling shadow

Scroll Shadows With JavaScript

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is …

Image
Chris Coyier on Oct 5, 2021
Image
Direct link to the article 2021 Scroll Survey Report
scroll-snap scrolling

2021 Scroll Survey Report

Here’s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We’re told to “star issues” in bug trackers to signal interest. We’re told to get involved in GitHub threads …

Image
Chris Coyier on Sep 15, 2021
Image
Direct link to the article The Fixed Background Attachment Hack
background-attachment fixed position scrolling

The Fixed Background Attachment Hack

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even …

Image
Murtuzaali Surti on Aug 27, 2021
Image
Direct link to the article Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
GreenSock GSAP infinite scroll scroll-snap scrolling ScrollTrigger

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling

I‘m not sure how this one came about. But, it‘s a story. This article is more about grokking a concept, one that’s going to help you think about your animations in a different way. It so happens that this particular …

Image
Jhey Tompkins on Apr 14, 2021
Image
Direct link to the article How to Create a Shrinking Header on Scroll Without JavaScript
navigation scrolling sticky

How to Create a Shrinking Header on Scroll Without JavaScript

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real …

Image
Håvard Brynjulfsen on Feb 16, 2021
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

CSS-Tricks
  • About the site
  • Contact us
  • Write for CSS-Tricks!
  • Advertising
  • RSS Feeds
Social
  • Bluesky
  • Mastodon
  • CodePen
  • X / Twitter
  • LinkedIn
Legalese
  • CSS-Tricks License
  • AI Statement
Back to Top
Advertisement
Advertisement