モバイルランドの「スクロールdiv」。いやいやいや？
今週、興味深い問題/チャレンジが発生し、一部のモバイルデザインでは画面の一部をスクロール可能にする必要がありました。これは、デスクトップサイト（通常、ニュース項目用の小さなスクロールボックス、またはおそらくスクロール可能なテーブルなどのWebアプリ内）では一般的です。
私はそれらの大ファンではありませんが、何でもいいので、モバイルで動作させましょう。これを処理する一般的な「ネイティブ」CSSの方法は、divにoverflow: scrollのCSSプロパティを指定すると、スクロールバーが表示されます。いいね。
悲しいかな、モバイル空間では、いくつかの問題があります。これまでに見つけたもの：
Androidデバイス：
- ほとんどはdivのコンテンツをまったくスクロールできません
- 一部（特にモバイルFirefox）は1本の指でコンテンツをスクロールできます
- どちらの場合も、スクロールバーは表示されません（アフォーダンスは提供されません）
iOSデバイス：
- 2本指スワイプでコンテンツをスクロールできます
- iOS5はこれを1本の指でスワイプします
- スクロールバーは表示されません（アフォーダンスは提供されません）
BB OS6デバイス：
- タッチデバイスは1本の指でスクロールできます
- キーボードデバイスはできません
- スクロールバーは表示されません（アフォーダンスは提供されません）
これらのデバイスのいずれにもスクロールバーが表示されないという単純な事実に基づいて、スクロールする必要があることを示唆しているので、ネイティブオプションはお勧めしません。
つまり、JavaScriptオプションがあります。タッチデバイスに適切と思われるのはiScrollです。
残念ながら、デフォルトではスクロールバーも表示されませんが、スクロール時にスクロールバーは表示されます。タッチデバイスで1本の指でスクロールできるようにします。
悲しいかな、それでもキーボードユーザーは行き詰まっている。 JSを介してDIVをスクロールするために上下にクリック可能な矢印を追加するオプションがいくつかあります。醜いが動作します。
だから、私の質問：
ページのスクロール領域がモバイルデバイスで良いか悪いかを言っているデータ/研究/ユーザーテストを持っている人はいますか（ご想像のとおり、私は「悪い」側に傾いていますが、どちらの方法でも確実にデータを受け入れています）。
誰かがそのようなパターンを実装する必要がありましたか？そうであれば、タッチとキーボードの両方の操作を緩和するこのためのUXパターンを見つけましたか？
問題はuxが良いか悪いかというほどではありませんが、クロスプラットフォームを実装することは、ほとんどの場合に価値があるよりも厄介です-モバイル画面には通常、1つのスクロールdivのためのスペースしかないため、通常のスクロールページを簡単に取得できます。
ただし、モバイルアプリでスクロールdivを使用する理由は少なくとも1つあります-固定ヘッダー/フッターです。これは、ネイティブアプリでよく見られるものです（つまり、通常/良いux）。ただし、モバイルブラウザーはまだ十分にサポートしていません。絶対配置の非スクロール要素の下にあるスクロール可能なdivのみが機能します。
Javascriptとcssを使用すると、キーボードイベントを含む、スクロールを実装するために必要なすべてのイベントをキャッチできますが、プラグインを使用しても、正しく機能させるために多くの努力が必要になります。
モバイルWebではdivをスクロールしないでください。ただし、ページ内にスクロール領域が必要な場合は、上下矢印または左右矢印を使用できます。
