scrolling Archives | CSS-Tricks

Article March 24, 2020

Indicating Scroll Position on a Page With CSS

Author

3 Comments

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”

scrolling sticky

Article December 23, 2019

Moving Rainbow Underlines

Author

Chris Coyier

10 Comments

Join Conversation

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 September 2, 2019

Need to scroll to the top of the page?

Author

Chris Coyier

8 Comments

Go to Comments

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?”

accessibility scrolling

Link March 29, 2019

Scroll-Linked Animations

Shared by

Chris Coyier

You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event and alter an element's styling based on that position. Or, probably better if you can, use IntersectionObserver. We just blogged about all this.

Now there is a new (unofficial) … Read article “Scroll-Linked Animations”

Our Notes / Read at wicg.github.io

animation scrolling

Article March 12, 2019

Smooth Scrolling for Screencasts

Author

Chris Coyier

Comments

Go to Comments

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”

screencasts scrolling smooth scrolling

Article March 11, 2019

Downsides of Smooth Scrolling

Author

Chris Coyier

17 Comments

Go to Comments

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”

scroll-behavior scrolling scrollIntoView smooth scrolling

Article March 7, 2019

Styling Based on Scroll Position

Author

Chris Coyier

11 Comments

Go to Comments

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”

attribute selectors data attributes debounce JavaScript scrolling

Link February 25, 2019

Dealing with overflow and position: sticky;

Shared by

Chris Coyier

Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It's like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that's not always desirable.

Dannie Vinther digs into a way of dealing with that. The end result is avoiding that situation all together by removing the element that wants to be … Read article “Dealing with overflow and position: sticky;”

Our Notes / Read at uxdesign.cc

scrolling sticky

Article August 15, 2018

Practical CSS Scroll Snapping

Author

Max Kohler

10 Comments

Go to Comments

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one:… Read article “Practical CSS Scroll Snapping”

scroll-snap scrolling

Article March 26, 2018

Sticky as a Local Fixed?

Author

Chris Coyier

4 Comments

Go to Comments

You know how position: relative creates a new context for absolute positioning within an element? Well, position: sticky is a locally scoped version of position: fixed. Let's take a look at how that works using a modal with a sticky close button as an example.

fixed position modal scrolling sticky