It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.
overflow and making it swipable with -webkit-overflow-scrolling is easy.scroll-snap-type.#jump-links is all you need to make navigation for it, which you can make all nice and smooth with scroll-behavior.
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”
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:
… Read article “Scroll to the Future”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
The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box.
html {
scroll-behavior: smooth;
}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({