1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】オーバーフロースクロールでスクロールの詰まりを解消する

2022-02-02 03:51:47

プリアンブル

divやモジュールにoverflow: scroll属性を使用すると、iOSの携帯電話で表示したときに、大きな吃音が発生することがあります。しかし、アンドロイドスマホでは、この問題は発生しません。

ワークアラウンド

このコードの行はハードウェアアクセラレーション機能を有効にするため、スワイプがスムーズに行われます。この方法は、ios5.0 と android4.0 以降のスライドラグ問題を解決します。

-webkit-overflow-scrolling: auto | touch;

auto:通常のスクロール。タッチパネルから指を離すとすぐに停止します。

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

互換性のある書き込み

over-flow: auto; /* winphone8 and android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */


ps.

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

これは、スクロール遅延の問題を解決するためにオーバーフロースクロールに関するこの記事の終わりです、より関連するオーバーフロースクロールのスクロール遅延の内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています!.