Select Page

Category: smooth scrolling

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 be way too fast for a screencast. I found a little trick though, originally published by (I think) Jedidiah Hurt. The trick is to use CSS transforms instead of actual scrolling. This way, both speed and easing can be controlled. Here’s the code that I cleaned up a little: const scrollElement = (element, scrollPosition, duration) => { // useful while testing to re-run it a bunch. // element.removeAttribute("style"); const style = element.style; style.transition = duration + 's'; style.transitionTimingFunction = 'ease-in-out'; style.transform = 'translate3d(0, ' + -scrollPosition + 'px, 0)'; } scrollElement( document.body, ( document.body.getBoundingClientRect().height - document.documentElement.clientHeight + 25 ), 5 ); The idea is to transform a negative top position for the height of the entire document, but subtract the height of what you can see so it doesn’t scroll too far. There is a little magic number in there you may need to adjust to get it just right for...

Read More

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 beefy is extra usable for me and the custom styling is just fun. But I did revert to no smooth scrolling. As Šime Vidas pointed to in Web Platform News, Wikipedia also tried smooth scrolling: The recent design for moved paragraphs in mobile diffs called for an animated scroll when clicking from one instance of the paragraph in question to the other. The purpose of this animation is to help the user stay oriented in terms of where the paragraph got moved to. We initially thought this behavior would benefit Minerva in general (e.g. when using the table of contents to navigate to a page section it would be awesome to animate the scroll), but after trying it out decided to scope this change just to the mobile diffs view for now I can see not being able to adjust timing being a downside, but that wasn’t what made me...

Read More
www.000webhost.com