The inability to completely disable the two-finger swipe gesture to navigate the browser history for an entire website is a constant annoyance to me. Up to this point, at least this behavior could be prevented by calling the warnDefault () method on the mousewheel event.

It looks like this doesn't work anymore in Chrome 59.

Here's how to reproduce it:

1. Start a gesture somewhere on the page, then undo it
2. From now on, preventing default has no effect.

Does anyone have a solution to this?

Examples of

Zenkit and Airtable both call protectDefault when you scroll through their table view. At first it seems like it works, but once a gesture has been recognized and then canceled at least once (outside the table, where no default prevention is called), gesture prevention no longer works (even inside the table). Thus, scrolling to the left within a table is nearly impossible as it always triggers a gesture.

In Trello kanban view, this only happens if you are on the left or right edge of the scroller. But I think this is because they use native scrolling and Zenkit and Airtable use CSS translation instead.

I tried to create an invisible scroll container on top of the content as soon as the user starts scrolling and then delete it. This greatly reduces the problem, but does not work in all cases.

Sample code: https://codepen.io/anon/pen/gRKaMX

This pen contains 3 boxes.

• The first one is scrolled initially using overflow: scroll. Here the gesture can only be triggered if the scrollLeft is 0.

• The second is connected to an event listener that triggers the prevention of every mouse wheel event. This prevents the gesture at first, but once you run it somewhere else on the page, it no longer works.

• And finally, there is a third div where you can always start the gesture.

StackOverflow also wants me to inline the code, so this is it:

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 temporarily fixes this issue but keeps coming back. I'm on Chrom 69 right now and this is still happening.