Stop chrome back/forward two finger swipe

Solution 1:

Disable Chrome two fingers back/forward swipe

This worked for me:

body {
  overscroll-behavior-x: none;
}

Solution 2:

Make the specific page open in a new tab/window by default (by putting target="_blank"> in hyperlink). That way there'll be no previous page to go back to.

Or prevent Horizontal Scrolling by default. To do that, you can use jquery.mousewheel to do:

$(document).on("mousewheel",function(event,delta){ 
  // prevent horizontal scrolling
  if (event.originalEvent.wheelDeltaX !== 0) {
    event.preventDefault();
  } 
});

Solution 3:

Assuming you have a horizontal-scrolling element, adding overscroll-behavior-x: contain; is the easiest way prevent the scroll action from spilling out into the page and causing the navigation.

https://dev.to/danburzo/css-micro-tip-prevent-history-navigation-on-horizontally-scrolling-elements-3iil

https://caniuse.com/#feat=css-overscroll-behavior

Solution 4:

Disable or replace swipe gestures for Google Chrome 61

The question that leads me here was marked "duplicate" and closed to answers. I believe this answer is better suited for the "duplicated" question, however, I feel this answer could possibly save time for someone landing on either question.

Better question: Disable navigation swipe on Chrome browser in javascript

This Google developers article helped me to allow the e.preventDefault() to work and prevent swipe gestures as of Chrome 61.

https://developers.google.com/web/updates/2017/01/scrolling-intervention

givanse's answer to the following was the code that I used to write my own swipe event handlers:

Detect a finger swipe through JavaScript on the iPhone and Android

In summary, the following two events are used to implement the swipe gestures:

handleTouchStart (e) {
  ...
},
handleTouchMove (e) {
  ...
  e.preventDefault()
}

As of Chrome 56, the default behavior is to make the event listeners passive and thus disable the ability to prevent Chrome's swipe gestures. To override this behavior, event listeners can be added as follows:

document.addEventListener(
  'touchstart',
  this.handleTouchStart,
  {passive: false}
)
document.addEventListener(
  'touchmove',
  this.handleTouchMove,
  {passive: false}
)

By passing the {passive: false} object as the third parameter to the addEventListener method, the listener is registered as active and can stop Chrome's default behavior with the e.preventDefault() event method.