CODEWITHSUNDEEP
javascriptgoogle-chromegesturemacos-sierrapreventdefault
Jesse
Jesse

Reputation: 432

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

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.

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.

Upvotes: 3

Views: 1400

Answers (2)

chaopeng
chaopeng

Reputation: 151

See my answer on https://bugs.chromium.org/p/chromium/issues/detail?id=889846#c3

This is expected behavior on Chrome.

If you are developer, please try to use overscroll-behavior to fix it. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

If you are user, please try to disable overscroll swipe on MacOS settings. See thread you provide. https://community.airtable.com/t/triggering-back-gesture-in-chrome-on-macos-when-scrolling-to-the-left/3074/6

For event.preventDefault() is not cancellable every wheel event. https://github.com/w3c/uievents/pull/171/commits/824a919756b4c5702a9878efd45ea5c93a2d73a3

Upvotes: 0

Philipp Beck
Philipp Beck

Reputation: 459

Have you tried turning it off and on again?

Upvotes: 6

Related Questions