Select Page

Category: scrolling

Scroll-Linked Animations

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) spec trying to bring these possibilities to CSS. I love it when web standards get involved because it sees authors like us trying to pull off certain design effects and wants to (presumably) help make it easier and more performant. I also like how this spec lists editors from Mozilla and Google and Apple. I wonder how they’ll handle the infinite-loop stuff here. Like you scroll to a point, it triggers some animation, which moves some element such that it changes the scroll position, which stops the animation, which moves the scroll position again… etc. I also wonder why it’s all specific to animation. “Scroll-position styling” seems like it would have the widest appeal and use level of usefulness. Direct Link to Article β€” Permalink The post Scroll-Linked Animations appeared first on CSS-Tricks....

Read More

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

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. The end result is a data-scroll attribute on the element that can be used in the CSS. Meaning if you’re scrolled to 640px down the page, you have and could write a selector like: html:not([data-scroll='0']) { body { padding-top: 3em; } header { position: fixed; } } See the Pen Writing Dumb JS πŸ§Ÿβ€β™‚οΈ and Smart CSS πŸ‘©β€πŸ”¬ by Rik Schennink (@rikschennink) on CodePen. Unfortunately, we don’t have greater than (>) less than (<) selectors in CSS for things like numbered attributes, so the CSS styling potential is fairly limited here. You might ultimately need to update the JavaScript function such that it applies other classes or data attributes based on your math. But you’ll already be set up for good performance here. “Apply styles when the user has scrolled away from the top” is a legit use case. It makes me think of a once function (like we have in jQuery) where any scroll event would only be triggered once and then not again. They scrolled! So, by...

Read More

Sticky as a Local Fixed?

Lemme set the stage a bit here. You have a website and, like most, it scrolls. This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll. Notice the modal has a close button. We can position: absolute that in the upper-right corner, but if our modal scrolls, it’s a problem. We’ve lost the close button behind the scrolling. Should be a job for more position: fixed, right? Not really, sadly, as there is no such thing as a local context for position: fixed....

Read More
www.000webhost.com