問題タブ [overscroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - モバイルサファリのオーバースクロールが突然ジャンプする
モバイル サファリで div をオーバースクロールすると問題が発生します。ネストされた構造がありbody { position: fixed }、その中に親と子の div があります。コンテナ div には次の要素があります:.container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }およびmax-heightjavaScript によって動的に設定されるプロパティ。
子 div のコンテンツを超えてモバイル サファリでコンテナーをオーバースクロールすると (「オーバースクロール」または「エラスティック/ラバーバンド」スクロール効果を開始すると、次のようにあらゆる種類のジッターが発生します。
私はSOと私が見つけることができる他のすべてのリソースを精査しましたが、役に立ちませんでした. 関連する可能性が高いと思われる情報の1つ：
要素のスクロールを無効にすると、スクロールしようとしているかのように画面をドラッグでき、子コンテンツの下部が消えて、iPhone で約 40 ピクセルのコンテナー div の背景が表示されることがあります。下部のコントロール バーとほぼ同じサイズですが、コントロール バーの上に表示されます。
また、スクロール時にサファリがサイズ変更イベントをトリガーするバグがあったという深く埋もれたコメントを読みましたが、テストのためにサイズ変更イベントがトリガーされた場合に警告するようにイベントリスナーを設定しましたが、それは発生しませんでした。
これを解決するために何を検索すればよいか迷っています。これを引き起こしている原因についてのアイデアはありますか?
注: FWIW、これは create-react-app を使用して React に組み込まれています。