loading...

CSS micro-tip: prevent history navigation on horizontally-scrolling elements

danburzo profile image Dan Burzo Updated on ・2 min read

Behold a horizontally-scrolling element:

.reel {
  display: flex;
  overflow-x: scroll;
}

This pattern is particularly useful on mobile devices as an alternative to stacking for breaking a grid apart, but its utility is not limited to small screens. A horizontally-scrolling section can also become the basis of an image slideshow on desktop browsers.

When people use the trackpad for navigating horizontally (often, with a two-finger gesture), we get an unintended side-effect: the gesture coincides with navigating through the browser history. A two-finger swipe to the right triggers the browser Back action, while two fingers to the left triggers the Forward action. When you reach the edges as you scroll the container, you often accidentally navigate away from the page (there's probably a name for the phenomenon).

To prevent the navigation, we can use the overscroll-behavior CSS property. A value of none or contain will make sure the excess scroll does not ripple to the container's ancestors and, ultimately, the page:

.reel {
  display: flex;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}

Here's a demo highlighting the difference.

At the time of writing, this property is supported in Firefox¹, Chrome², and Edge, so most desktop users will benefit from the enhanced behavior.

For extra credit also opt into smooth, accelerated scrolling in mobile Safari with -webkit-overflow-scrolling: touch. While iOS / iPadOS 13 makes this the default, it's still a nice, ahem, touch for older versions.


¹ There's a small issue in Firefox with the first swipe
² I stumbled upon a peculiar combination that made Chrome ignore the declaration


If you liked this article, you may enjoy this simple trick for inputs in mobile Safari, or take a deep-dive into units for media queries.

Discussion

pic
Editor guide
Collapse
simevidas profile image
Šime Vidas

Is there a demo? This CSS property doesn’t seem to be supported in Safari.

Collapse
danburzo profile image
Dan Burzo Author

The property is only supported on Chrome, Firefox and Edge. I'll whip up a demo that shows the behavior.

Collapse
danburzo profile image
Dan Burzo Author

I've updated the article with a link to the demo. Hope it helps!

Collapse
simevidas profile image
Šime Vidas

A two-finger swipe to the right triggers the browser Back action, while two fingers to the left triggers the Forward action.

Is this a standard feature on Windows laptops?

Thread Thread
danburzo profile image
Dan Burzo Author

I have tested on a Microsoft Surface machine running Windows 10 and the gesture is enabled in Edge and Chrome (Firefox does not support it currently). I think the hardware needs to have a Precision Touchpad for this to work.

Thread Thread
simevidas profile image
Šime Vidas

Thanks for checking. I tried on a regular Windows laptop, and there were no such gestures, at least not by default.

I also tried on my two Android phones, and swiping from the edges did not navigate in the browser for me. However, it seems to be an optional feature, according to Jason Miller, but I couldn’t find it.

Thread Thread
danburzo profile image
Dan Burzo Author

Interesting! In either case, I would not expect overscroll-behavior to affect mobile navigation gestures, since they are separate from scrolling gestures, and much less likely to be performed accidentally.

Collapse
vovchisko profile image
Vladimir Ishenko

Damn handy article for today :3
Thanks, Dan!

Collapse
websmyth profile image
Dave Smyth

Brilliant tip: thank you!

Collapse
danburzo profile image
Dan Burzo Author

Thanks, Dave! Hope it's useful :-)

Collapse
murdendev profile image
Matheus Murden

Very Very useful! Easy to implement and has a noticeable impact in the perceived smoothness