Behold a horizontally-scrolling element:
.reel {
display: flex;
overflow-x: scroll;
}
Enter fullscreen mode
Exit fullscree...
For further actions, you may consider blocking this person and/or reporting abuse
Is there a demo? This CSS property doesn’t seem to be supported in Safari.
The property is only supported on Chrome, Firefox and Edge. I'll whip up a demo that shows the behavior.
I've updated the article with a link to the demo. Hope it helps!
Is this a standard feature on Windows laptops?
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.
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.
Interesting! In either case, I would not expect
overscroll-behaviorto affect mobile navigation gestures, since they are separate from scrolling gestures, and much less likely to be performed accidentally.This CSS property doesn’t seem to be supported in Chrome 97.0.4692.71.
What operating system are you on? I don't have Chrome 97 specifically, but it works fine in Chrome 98 and 99 on macOS.
Windows 11, Chrome 128
overscroll-behavior-x: nonehas no BACK-gesture prevention when scrolling the container horizontally via touchpad with two fingers. It still triggers BACK.Brilliant tip: thank you!
Thanks, Dave! Hope it's useful :-)
Damn handy article for today :3
Thanks, Dan!
Very Very useful! Easy to implement and has a noticeable impact in the perceived smoothness