Skip to main content
CSS is fun and cool and I like it.
Article

Memorize Scroll Position Across Page Loads

Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation. … Read article “Memorize Scroll Position Across Page Loads”

Link

How I Put the Scroll Percentage in the Browser Title Bar

Article

Indicating Scroll Position on a Page With CSS

Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there is no fold” saying comes from the idea that people know how to scroll and there is no arbitrary line that people don’t go under.

Scroll-based features tend … Read article “Indicating Scroll Position on a Page With CSS”

Article

Moving Rainbow Underlines

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It’s not scroll-jacking — it’s just a minor design feature that uses scroll position to enact a little movement. … Read article “Moving Rainbow Underlines”

Article

Need to scroll to the top of the page?

Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html></html> element. So like…

<html id="top">
  <body>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

But we’ve got a few options here.… Read article “Need to scroll to the top of the page?”

Link

Scroll-Linked Animations

Article

Smooth Scrolling for Screencasts

Let’s say you wanted to scroll a web page from top to bottom programmatically. For example, you’re recording a screencast and want a nice full-page scroll. You probably can’t scroll it yourself because it’ll be all uneven and jerky. Native JavaScript can do smooth scrolling. Here’s a tiny snippet that might do the trick for you:

window.scrollTo({
  top: document.body.getBoundingClientRect().height,
  behavior: 'smooth'
});

But there is no way to control the speed or easing of that! It’s likely to … Read article “Smooth Scrolling for Screencasts”

Article

Downsides of Smooth Scrolling

Smooth scrolling has gotten a lot easier. If you want it all the time on your page, and you are happy letting the browser deal with the duration for you, it’s a single line of CSS:

html {
  scroll-behavior: smooth;
}

I tried this on version 17 of this site, and it was the second most-hated thing, aside from the beefy scrollbar. I haven’t changed the scrollbar. I like it. I’m a big user of scrollbars and making it … Read article “Downsides of Smooth Scrolling”

Article

Styling Based on Scroll Position

Rik Schennink documents a system for being able to write CSS selectors that style a page when it has scrolled to a certain point. If you’re like me, you’re already on the lookout for document.addEventListener('scroll' ... and being terrified about performance. Rik gets to that right away by both debouncing the function as well as marking the event as passive.… Read article “Styling Based on Scroll Position”

Link

Dealing with overflow and position: sticky;