スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明

序文

div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンでブラウジングするときに明らかな遅延が発生します。ただし、この問題は Android フォンでは発生しません。

回避策

次のコードでこの遅延の問題を解決できます: -webkit-overflow-scrolling: touch;、このコード行によりハードウェア アクセラレーション機能が有効になり、スライドが非常にスムーズになります。この方法は、iOS5.0 および Android4.0 以降のシステムのスライディング ラグ問題を実際に解決できます。

-webkit-overflow-scrolling: auto | touch;

自動: 通常のスクロール。タッチスクリーンから指を離すと、すぐにスクロールが停止します。

タッチ: スクロール リバウンド効果。指をタッチ スクリーンから離すと、コンテンツはしばらくスクロールし続けます。スクロールの継続速度と継続時間は、スクロール ジェスチャの強度に比例します。新しいスタッキング コンテキストも作成されます。

互換性のある書き込み

over-flow: auto; /* winphone8 および android4+ */
-webkit-overflow-scrolling: タッチ; /* ios5+ */

追伸:

1. このプロパティを追加しても機能しない場合は、overflow-y: scroll を追加すると機能します。

2. 要素に position: absolute|relative を設定し、-webkit-overflow-scrolling: touch; 属性を追加すると、スクロール領域が数回スライドした後に停止し、それ以上スライドできなくなります。この場合、要素の z-index 値を増やすだけです。

参考文献: https://www.jianshu.com/p/1f4693d0ad2d

https://www.cnblogs.com/wuyinghong/p/7450041.html

オーバーフロースクロールによるスクロール詰まりの問題を解決する方法についての記事はこれで終わりです。オーバーフロースクロール詰まりの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。