4

ええ、私は HTML5 でモバイル アプリを開発したいと考えている連中の 1 人です。Android と iOS で。私が知っている狂ったように聞こえます。悲しいことに、私には問題があります...

フッターとヘッダー、およびスクロール可能なコンテンツを備えたクラシックアプリがあります。iOSでは、これは素晴らしい作品です! ヘッダーとフッターには「位置: 固定」が上/下にあり、コンテンツは「-webkit-overflow-scrolling: touch;」でネイティブのスクロールの勢いを使用します。「-webkit-overflow-scrolling: touch;」ということは知っています。Android では使用できませんが、このプロパティは無視されるだけでなく、スクロールもまったく機能しません!

iOS で「ネイティブ」スクロールを取得し、Android で同じマークアップとスタイルを使用して「適切な」スクロールを取得する方法を教えてください。たとえば、勢いのあるネイティブスクロールを使用できる場合-そうでない場合でも素晴らしい-プレーンスクロール。

注: 今のところ、サポートする必要があるのは最近のバージョンだけです (Android 2.3 はありません!)。そのため、iScroll 4 のような JS フォールバックは必要ありません。

.content {
    // no(!) scrolling on Android - why?
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

JSFiddle: http://jsfiddle.net/bmJxN/

ありがとう！

4

3 に答える 3

7

古い投稿を掘り下げて申し訳ありませんが、満足のいく答えがないように見えるので、私のようにここにたどり着く人のために2セントを追加すると思いました.

モバイル WebApp でのスクロールの一般的な問題について言えば、プラットフォームに応じて多種多様な実装が存在するため、モバイル ブラウザーでのスクロールと勢いは苦痛です: Android ブラウザー != Chrome != Safari != オペラなど、および Android < 3 は、iOS < 5 と同様に、スクロールや新しいバージョンをサポートしていません。

状況は複雑で、ほとんどのデバイスが iOS 5 または 6 上にある iOS では問題にならない可能性がありますが、Android の断片化では実際の問題です。

これをよりよく理解するには、これを読むことができます。

これに対応するために、すでに指摘したように、iScroll や最近では Overthrow などのフォールバックがあり、ネイティブの実装と JS フォールバックをより適切に処理できます。最近では、Financial Times チームが FTScroller ライブラリを公開しましたが、これも有望に見えます。

あなたの状況では、Android 4+ と iOS5+ のみをサポートしたい場合は、固定位置のみを使用して勢いをつけて動作させることができるはずです。

overflow: auto;
-webkit-overflow-scrolling: touch;

スクロール可能なコンテンツ (auto プロパティを使用する場合は「overflow-x:hidden」を指定する必要はありません)。そうでない場合は、固定配置またはその他の css レイアウト プロパティを間違えた可能性があります。（継承されたボディ小道具など）。

更新：回答を投稿する前にこれを行うべきでしたが、Nexus4でフィドルをテストしたところ、コードはChromeで動作します：おそらく、Android 4以降のない古いデバイスでテストしたか、そうでないブラウザでテストしたことを意味しますオーバーフロー プロパティをサポートしますか?

補足:

  • Android と iOS ではモーメンタム エフェクトがデフォルトでアクティブになっていますが、適用されるのはプラットフォーム固有のモーメンタムであることに注意してください。スクロールするモーメンタムをプラットフォームに依存しないようにする JS ポリフィルとは対照的に、それらは互いに異なります。また、iOS では、新しいデバイスと Android 4.0 以降で状況が改善されたにもかかわらず、スクロールは Android よりもはるかにスムーズです (それ以前は、ほとんどの人口の多いビューでは痛々しいほど使用できませんでした)。
  • iOS では、プラットフォームにネイティブなバウンス効果がありますが、Android ではネイティブ ブラウザーの UX にこのバウンス効果が含まれていないため、この効果はありません (設定など、OS UX の他の部分にこの効果が存在するため、これは奇妙です)。ライブラリを使用して Android でこれを実現できますが、不気味の谷に注意してください。
  • ここで指摘されているように、Android ブラウザーにスクロール位置インジケーターがないなど、新しいブラウザーにも他の問題が存在します: http://barrow.io/overflow-scrolling。iOS では、「 iOS Web アプリでラバー バンドを無効にする方法」で指摘されているように、特定の要素内でスクロールすると、ページ全体で悪名高い「ラバー バンド スクロール効果」の問題が発生する場合があります。WP8 webApps にも同様の pb があります。

スクロールのような単純なものは、モバイル WebApps では完璧にはほど遠いものであり、WebViews のパフォーマンスは (たとえば、PhoneGap アプリを開発する場合) はさらに悪いと言えます。幸運を ！

于 2013-09-17T09:59:11.550 に答える
0

他の場所で適切に説明されていないように見える動作のため、ここに追加のメモを追加します。

'overflow: auto' または 'overflow: scroll' を使用すると、Chrome for Android はページの読み込み時にスクロールバー インジケーターを一時的に表示してから非表示にします (デスクトップ ブラウザーの一般的な動作とは異なります)。さらに複雑なことに、これらのインジケーターは非常に薄くて半透明なので、簡単に見逃してしまいます。

これは、一般的なページ スクロールでは問題にならない場合があります。ただし、追加のコンテンツを示すスクロールバーが失われると、ページの領域をスクロールするために使用する場合 (フルページ アプリなど)、深刻な UX の問題が発生します。

これを修正するには、カスタム スクロールバーを追加します。「overflow:auto」を使用すると、これらのスクロールバーは、コンテンツが表示領域を超えた場合にのみ表示されます (デスクトップ ブラウザーと同様)。

次のコードを CSS に追加します。

::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #F5F5F5;
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 100px;
}

以下のコードで垂直方向の矢印を追加することもできます。同様に、垂直方向を水平方向に交換することで、水平方向の矢印を含めることができます。

::-webkit-scrollbar-button {
  width: 12px;
  height: 12px;
  background-color: #F5F5F5;
  background-size: 100%;
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url('../images/arrows/arrow-down.png');
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('../images/arrows/arrow-up.png');
}

最後の 2 行には矢印の画像が必要ですが、これらを投稿に追加できませんでした (おそらくサイズが小さいため)。

他のスクロールバー プロパティもカスタマイズできます。以下のガイドは、詳細な説明を提供します。

http://poselab.com/en/custom-scrollbars-in-webkit/

于 2016-02-23T09:17:57.460 に答える
-2

それには多くの理由があります。あなたができることは、このタスクを達成するためにサードパーティのライブラリを使用することです. 結果を得るために、github のオープン ソース ライブラリの 1 つを使用しました:- ライブラリはこちら

それが役に立つことを願っています...

于 2012-12-18T13:26:23.717 に答える