Disable Chrome two fingers back/forward swipe

Question

I have a page where the user can scroll horizontally the content, and in Chrome this scroll action sometimes triggers the two fingers back/forward swipe.

How can I deactivate this Chrome's function in a specific page, without disabling horizontal scroll?

Hyden

It doesn't look like it's possible to change it as a developer; only as a user. See How do I disable Chrome's two-finger back/forward navigation? and productforums.google.com/forum/#!topic/chrome/PaMriZC-Kuo – Respectable

Check my answer/example here (it may help): #15829672 – Gran

Check my answer/example here (it may help): #15829672 – Gran

Does this answer your question? Stop chrome back/forward two finger swipe – Parlando

Answer 1

After way too long, I discovered this:

html, body {
  overscroll-behavior-x: none;
}

Stator

@MattSanders you probably need to set it on another DOM element. For me it works using the same Chrome version. – Courier

@Courier - hmm, thanks. Is it working for you on body or a different element? – Aerify

In case this helps someone else, body and the element with overflow on it didn't work, but putting overscroll-behavior-x on the html element itself did work for me. – Aerify

Answer 2

I have found that this chrome setting disabled the behavior: chrome://flags/#overscroll-history-navigation

Just disable overscroll, it will disable the page navigation using the scroll but normal horizontal scroll on the page will work. Tested on my end.

Connected

It seems that this no longer exists? – Unpractical

This still exists in Edge (chrome-based) – Cassella

Answer 3

Go to Chrome flags by pasting Chrome://flags in the address bar and search for Overscroll history navigation and change this from default to Disabled

It will prompt to restart the browser, restart it.

This should solve it.

Darr

Finally I got rid of that nasty feature. Thanks! – Figment

Answer 4

It is only possible to disable this feature by disabling scrolling itself:

With jQuery:

('body').on('wheel', function(e){ e.preventDefault(); });

Without jQuery:

document.body.addEventListener('wheel', function(e){ e.preventDefault(); });

This code will work in Modern browsers but is not cross-browser tested. Also, MAJOR CAVEAT: if you still want the users to be able to scroll the page, you'll have to roll your own scrolling to make it all work.

Sybyl

Answer 5

Posting a non-CSS answer, which sometimes you don't have access to.

Run chromium / chrome with the disable-features=OverscrollHistoryNavigation :

# Run Chromium or Chrome with following flag
chromium --disable-features=OverscrollHistoryNavigation

Other gesture-related flags are usually recommended (such as the one that disables zooming via pinch, --disable-pinch), can be found here: https://niek.github.io/chrome-features/, which is a blog post recommended on the official docs (here, down bottom)

Mite