Chill Scroll Snapping: Article Headers

By Chris Coyier on

CSS has a feature called scroll snapping. A lot of the demos and examples, rightfully so, focus around things that benefit highly from it. For instance, an image slider, carousel, or grid of things that just beg to be aligned after scrolling. But you don’t have to be in such a strict and rigid situation […]

Scroll-Locked Dialogs

By Chris Coyier on

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

How to fix the invisible scrollbar issue in iOS browsers

By Šime Vidas on

The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]

Draw on Scroll

By Chris Coyier on

Clever idea idea from Rauno Freiberg then explained by Brad Woods. To create a line drawn on scroll effect, we render a line down the page. Then, use a clip-path to show only part of it. As the user scrolls, we translate the clip-path down the page.