While building a recent interactive experience with GSAP ScrollTrigger, I ran into the Chrome browser behaviour issue regarding how it triggers the browser history navigation. A simple CSS line can fix this if you need. It’s overscroll-behavior-x: none;
How to stop Chrome’s back/forward navigation when swiping left or right
In my build, the page used a horizontal scrolling section driven by vertical scroll. To make the experience feel more natural on laptops, I also mapped trackpad horizontal swipes to the same scrolling behaviour.
However, it kept accidentally triggering Chrome’s browser history navigation when swiping left or right on the trackpad. Instead of moving through the experience, Chrome would jump to the previous or next page.
The fix is surprisingly simple:
html,
body {
overscroll-behavior-x: none;
}You can also apply it to a specific scrolling container:
.my-horizontal-section {
overscroll-behavior-x: none;
}This prevents horizontal overscroll gestures from being interpreted as browser navigation and allows custom horizontal interactions to work as intended.
A small CSS property, but a useful one when building custom scrolling experiences.
That’s it! Happy days