Tag: Smooth

Fixing Smooth Scrolling with Find-on-Page

Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example):

… when you control+f or command+f and search on CSS-Tricks, it’ll scroll very slowly instead of snapping to the result, which makes finding information and keywords on CSS-Tricks much slower. As someone who uses this shortcut frequently, this is a usability issue for me.

Not terribly long after, I just removed it. I didn’t feel that strongly about it, and the fact that you have almost zero control over it, made me just can the idea.

I see it come up as a “CSS tip” a lot, so I chimed in with my experience:

After mentioning that, Christian Schaefer chimed in with a great idea:

Love that!

Christian blogged it:

Smooth scrolling is consequently applied to everything. Always. Even when cycling through the browser’s page search results. At least that’s the case for Chromium. So for the page search it would be desirable for the browser to make an exception to that rule and to deactivate smooth scrolling. Until the Chromium team fixes it, here is a trick how to solve the problem on your own with a little bit of extra CSS and HTML.

I’m not sure if Chrome (or any other browser) would consider that a bug or not. I doubt it’s specced since find-on-page isn’t really a web technology feature. But anyway, I much prefer find-on-page without it.

html:focus-within {   scroll-behavior: smooth; }

It mostly works. The bummer part about it is situations like this…

<a href="#link-down-the-page">Jump down</a>  ...  <h2 id="link-down-the-page">Header</h2>

That will jump the page down. With scroll-behavior: smooth; in place, that’s kinda nice. But <h2> is typically not a “focusable” element. So, with the trick above, there is now no focus within <html> anymore, and the smooth scrolling is lost. If you want to preserve that, you’d have to do:

<h2 tabindex="-1" id="link-down-the-page">Header</h2>

The post Fixing Smooth Scrolling with Find-on-Page appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


, , ,

Make a smooth shadow, friend.

One box-shadow is cool and all, but check out Philipp Brumm’s tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.

This reminds me very much of the idea for easing linear-gradient. In a gradient, this smoothing effect is handled by multiple stops with the position and color eased (sloped) rather than linear (straight). The result is noticeably smoother and a more pleasing look.

See the Pen
smooth box-shadow
by Chris Coyier (@chriscoyier)
on CodePen.

Direct Link to ArticlePermalink

The post Make a smooth shadow, friend. appeared first on CSS-Tricks.


, ,

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 you.

Here’s a movie I recorded that way:

It’s still not perrrrrrfectly smooth. I partially blame the FPS of the video, but even with my eyeballs watching it record it wasn’t total butter. If I needed even higher quality, I’d probably restart my computer and have this page open as the only tab and application open, lolz.

See a Demo

Another possibility is a little good ol’ fashioned jQuery .animate(), which can be extended with some custom easing. Here’s a demo of that.

See the Pen
jQuery Smooth Scrolling with Easing
by Chris Coyier (@chriscoyier)
on CodePen.

The post Smooth Scrolling for Screencasts appeared first on CSS-Tricks.


, ,

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 ditch smooth scrolling. The thing that seemed to frustrate a ton of people was on-page search. It’s one thing to click a link and get zoomed to some header (that feels sorta good) but it’s another when you’re trying to quickly pop through matches when you do a Find on the page. People found the scrolling between matches slow and frustrating. I agreed.

Surprisingly, even the JavaScript variant of smooth scrolling…

document.querySelector('.hello').scrollIntoView({    behavior: 'smooth'  });

…has no ability to adjust timing. Nor is there a reliable way to detect if the page is actively being searched in order to make UX changes, like turning off smooth scrolling.

Perhaps the largest downside of smooth scrolling is the potential to mismanage focus. Scrolling to an element in JavaScript is fine, so long as you almost move focus to where you are scrolling. Heather Migliorisi covers that in detail here.

The post Downsides of Smooth Scrolling appeared first on CSS-Tricks.


, ,