問題タブ [pointerlock]

ポインターが特定の要素にロックされている場合、マウスホイールが実際にドキュメントをスクロールしないようにしたい.

最小限の例を次に示します。

赤い div をクリックすると、ポインターが div にロックされ (これが機能します)、変数lockedが true に設定されます (機能します)。ESC を押すとロックが解除され、マウスを再び動かすことができます (機能します)。

また、マウス ホイール イベントをリッスンし、変数lockedが true に設定されている場合はそれらを防止します。Firefox や Edge でも問題なく動作しますが、Google Chrome ではevent.preventDefault()無視され、ページが上下にスクロールします (私が望むものではありません)。

サンプル ワークフローは次のようになります。

1. カーソルをどこにでも移動します（divの上かどうかは関係ありません）
2. スクロールホイールを使用すると、それに応じてページがスクロールします（そうあるべきです）
3. 私が見るコンソールでbreak
4. divをクリックすると、ポインターがロックされます
5. コンソールは言うsetting locked: true
6. 今、私は再びスクロールしますが、ページはまだスクロールします (間違っています)
7. コンソール：locked: true cancelable: false

ここで興味深い部分がありif (!locked) {}ます。ホイール イベント リスナーからセクションを削除すると、コンソールに.locked: true cancelable: true

なんらかの理由で、ifブロックによってイベントがキャンセル不可になるのですか?

ここに私の質問があります:マウスホイールがページをスクロールするのを条件付きで防ぐにはどうすればよいですか?条件は、ポインターが特定の要素にロックされているかどうかです?

私も試したいくつかのこと：

• wheel イベントリスナーを にアタッチしdivます。
• ポインターがロックされているときに無条件に防止するイベント リスナーをアタッチし、ロックが解放されたときにそれを削除します。
• wheel イベントリスナーを「すべて」にアタッチする: window document div...
• event.stopPropagation();
• event.stopImmediatePropagation();（いくつありますか？）

すべてが上記の最小限の例と同じ結果になりました。

編集: Windows 10のGoogle Chrome 71とCentOS 7.4のChromium 65で最小限の例を試しました:そこでは機能しませんでした。

Chrome の将来のバージョンでは、pointerLock を使用して、オペレーティング システムの伝達関数 [1] を通過する前のマウスの生の動きまたは未調整の動きを取得できるようになることを願っています。

未調整の動きで pointerLock を要求すると、次のように機能します。

これは現在、Chrome (バージョン 88-91 など) でのみ機能し、ユーザーが手動で chrome://flags/#enable-pointer-lock-options を有効にした場合にのみ機能するようです。

この時点で実際に pointerLock を要求することなく、 unadjustedMovement がブラウザーでサポートされているかどうかを確認したいと思います。したがって、私の質問は、pointerLock を要求せずに unadjustedMovement がサポートされているかどうかを確認する方法があるかどうかです。

更新: 念のため、次のスニペットを使用して自然に確認できます。

ただし、これが悪影響を与える可能性があるかどうかはわかりません。さらに重要なことに、アクティブ化のジェスチャーが必要です. つまり、関数を呼び出す結果となったクリックです。

[1] https://web.dev/disable-mouse-acceleration/