[CSSチュートリアル】オーバーフロースクロールでスクロールの詰まりを解消する
プリアンブル
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
これは、スクロール遅延の問題を解決するためにオーバーフロースクロールに関するこの記事の終わりです、より関連するオーバーフロースクロールのスクロール遅延の内容は、スクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています!.
関連
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル】パララックススクロールの効果を完成させるCSS
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する
-
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】空間均等性の問題を解決する2つの方法
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3
-
[CSSチュートリアル]css use negative margin to achieve average layout of example.