web-dev-qa-db-ja.com

IOS using overflow-x：scroll; CSSを使用したスクロール可能なdivを使用した、スムーズなネイティブスタイルのスワイプスクロール

スクロール可能なdivを使用する

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

[〜＃〜] demo [〜＃〜] on Androidスワイプでのスクロールはスムーズで、加速と減速も可能です。

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

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

ioscsshtml5css3mobile
45
Aaron

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

-webkit-overflow-scrolling: touch;

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

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

107
Marco Aurélio

マルコ・アウレリオからの提案は、実際には最良の解決策です。 overflow-y: scrollを設定し、さらに-webkit-overflow-scrolling: touchを要素に追加する場合に最適です。ネイティブのようなスクロール感が得られます

1
Dionys Lucifer

わかりました、これは私のために働くものです：

body, html { 
   overflow-x:hidden; 
   -webkit-overflow-scrolling: touch;
}
0
meck373