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

Articles Tagged scroll-behavior

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
4 Articles
{
,

}
Article

Downsides of Smooth Scrolling

Avatar of Chris Coyier
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

Link

Scroll to the Future

Avatar of Robin Rendle
Shared by
Robin Rendle

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.

My favorite part of all though? It has to be this bit:

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is

… Read article
Our Notes   /   Read at evilmartians.com
Snippet

Smooth Scrolling

Avatar of Chris Coyier
Author
Chris Coyier
616 Comments
Join the Conversation

Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior.

html {
  scroll-behavior: smooth;
}

And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this:

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({
… Read article