46

スクロール可能な div の使用

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Android デバイスでのデモスワイプでのスクロールはスムーズで、加速と減速さえあります。

iPhone での同じコードでは、スクロールが固くなります。ユーザーがタッチを離すと、スクロールはすぐに停止します。

iPhone でスクロール可能な div を Android ブラウザのようにスムーズに加速/減速するネイティブ スタイルのスクロールで処理するにはどうすればよいですか?

4

3 に答える 3

109

overflow次の独自の CSS プロパティを使用して、HTML 要素でネイティブ スタイルのスクロールを取得できます。

-webkit-overflow-scrolling: touch;

ただし、いくつかの注意事項があります。要素の内容によっては、レンダリングが少し壊れている可能性があるため、テストして、特定のニーズに合っているかどうかを確認する必要があります。を指定した場合に正しく動作するかどうかもわかりませんoverflow-y: hidden。overflow-xそうでない場合は、 、overflow-yおよびoverflow(autoが機能していないようです)の値を変えてみることで、機能させることができるはずです。

必要に応じて、コンテンツでネストされた 2 番目のインスタンスを作成し、そのプロパティを設定することで、偽装overflow-y: hiddenすることができます。しかし、それが必要でないことを願っています。divdiv

于 2013-09-11T22:25:12.217 に答える
1

Marco Aurélio からの提案は、実際には最良の解決策です。overflow-y: scroll要素にAND を設定して追加すると、最適に機能-webkit-overflow-scrolling: touchします。ネイティブのようなスクロール感が得られます

于 2015-08-20T08:12:17.503 に答える