最新のChromeバージョン（59）のMacでのナビゲーションジェスチャを防ぐことはできません

Question

ウェブサイト全体のブラウザ履歴をナビゲートするために2本指のスワイプジェスチャを完全に無効にすることはできません。この時点までは、それはマウスホイールイベントでのpreventDefault（）を呼び出すことによって、その動作を防ぐために、少なくとも可能でした。

これは、Chromeでもう動作していないようです59.

ここ

それ再現する方法です。その時そこから

それをキャンセルし、ページのどこかに

1. スタートジェスチャーを、preventDefaultは効果がありません。

誰もがこれに対する解決策を持っていますか？

例

ZenkitとAirtableあなたは自分のテーブルビュー内でスクロールすると両方でpreventDefaultを呼び出します。これは、最初に動作しているようだ、しかし、すぐにジェスチャーを認識してから（テーブルの外、どこデフォルトは呼び出されません防ぐ）を少なくとも1回キャンセルされたとして、ジェスチャーを防止することが（でも、テーブル内で）もう動作しません。それで、そこから、テーブル内の左にスクロールすることは、常にジェスチャーをトリガーするのでほとんど不可能です。あなたはスクロールバーの左端または右端にいる場合にのみ発生しTrello`sかんばんビューで

。しかし、私はZenkitとAirtableではなく、CSSの翻訳を使用している間、彼らはネイティブのスクロールを使用しているためそれがあると思います。

ユーザーがスクロールして後で削除すると、目に見えないスクロールコンテナをコンテンツの上に作成しようとしました。これにより、問題は大幅に軽減されますが、すべての場合に問題はありません。

コード例： https://codepen.io/anon/pen/gRKaMX

このペンで3つのボックスがあります。

• 最初の1つは、overflow：scrollを使用してネイティブにスクロールします。 scrollLeftが0の場合にのみジェスチャがトリガされます。

• 2番目のイベントリスナは、マウスホイールイベントごとにpreventDefaultを呼び出します。これは最初はジェスチャーを防ぎますが、一度ページ上の他の場所で起動するともう動作しません。

• 最後に、ジェスチャーをいつでも開始できる第3のdivがあります。

  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：

StackOverflowのは、私はそれがあるので、ここで、同様のコードをインライン化したい

$('#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; 
} 

ありがとうございます。 Jesse

Answer 1

もう一度電源を切ってみましたか？