Can't prevent navigation gesture in latest Chrome version (59) on mac

Question

Not being able to completely disable the two-finger swipe gesture to navigate through the browser history for a whole website is a constant annoyance to me. Up until this point, it was at least possible to prevent that behavior by calling preventDefault() on the mousewheel event.

This does not seem to be working anymore in Chrome 59.

Here is how to reproduce it:

1. Start the gesture somewhere on the page, then cancel it
2. From there on, preventDefault has no effect.

Does anyone have a solution to this?

Examples

Zenkit and Airtable both call preventDefault when you scroll inside their table view. It seems to be working at first, but as soon as the gesture was recognized and then canceled at least once (outside the table, where prevent default is not called), preventing the gesture doesn't work anymore (even inside the table). So from there on, scrolling to the left inside the table is almost impossible because it always triggers the gesture.

In Trello`s kanban view it only occurs if you're at the left or right edge of the scroller. But I guess that is because they use native scrolling while Zenkit and Airtable use css translation instead.

I tried creating an invisible scroll container on top of the content once the user starts scrolling and removing it afterwards. This reduces the problem significantly but doesn't work in all of the cases.

Example Code: https://codepen.io/anon/pen/gRKaMX

There are 3 boxes in this pen.

• The fist one scrolls natively using overflow: scroll. Here the gesture can only be triggered if scrollLeft is 0.

• The second one has an event listener attached that calls preventDefault on every mousewheel event. This prevents the gesture at first but once you started it anywhere else on the page, it doesn't work anymore.

• And lastly there is a third div that you can always start the gesture on.

StackOverflow wants me to inline the code as well, so here it is:

HTML:

 Native Scrolling:
<div id="native-scrolling" class="box">
  <div></div>
 </div>

Prevent gesture by calling prevent default. Only works if you didn't start the gesture anywhere else, yet:
<div id="prevent-gesture" class="box"></div>

Just a normal div:
<div class="box"></div>

JavaScript:

$('#prevent-gesture').on('mousewheel', function (event) {
  event.preventDefault();
});

CSS:

.box {
  height: 100px;
  width: 200px;
  background: black;
}

#native-scrolling {
  overflow: scroll;
}

#native-scrolling > div {
  width: 200%;
  height: 10px;
}

Thanks in advance, Jesse

Edit: About the accepted answer

Restarting Chrome fixes this issue temporarily but it keeps coming back. I'm on Chrom 69 now and it still occurs.

Answer 1

Have you tried turning it off and on again?