2011-07-24 13 views
5

IOSデバイス(メインキーのiPad)のネイティブスクロール動作を模倣するために使用できるJavascriptライブラリjQueryベースのライブラリでも問題ありません。あなたはできる限り多くを記入してくださいJavascriptを使用したネイティブスクロール

... uは言う前に

はまた、私が最も一般的にはiScroll https://github.com/cubiq/iscroll である知っているが、私は詳細をお知りになりたいです。ありがとう。

答えて

3

Scrollability by Joe Hewittは最近開発された実装で、iOSデバイスのネイティブスクロールを模倣するのには非常に適しています。しかし、それは彼自身の入場によって "進行中の作業"であり、プロダクションで使用する準備ができていません。

さらに、iOS 5は-webkit-overflow-scrolling: touchのCSSプロパティと値を使用して直接ネイティブスクロールをサポートします。要素にoverflow: scrollと一緒に設定すると、スクロールはネイティブアプリでパネルをスクロールするように振る舞います。指1本、ネイティブスタイルの勢いと振る舞いです。基本的に、JavaScriptのチャンクを取り込むすべてのものは、2つのCSSプロパティで置き換えることができます。

欠点は、それが唯一のiOSベータ版であるため、iOSの5は主流(リリースされたばかりではない)、Androidはそれを採用している(とそのリリースが主流となって)まで、あなたはまだフォールバックとしてスクリプトを使用する必要があります私たちはまだ良いもののための後退を必要とするでしょう。

詳細はFunctionSourcethis blogです。繰り返しますが、これは現在使用されていませんが、今後6〜12カ月で有効になります(他のプラットフォームではもっと長くなる可能性があります)。

+0

Thxをたくさん..ただ、一つの質問.... uはiOSの5が直接持っているだろうと言うとき-webkit-overflow-scrolling:touch CSSプロパティ.....を介したネイティブスクロールのサポート.....正確にはどういう意味ですか?そのプロパティをどの要素にも適用できるような意味ですか?固定された高さのdiv ...はいの場合、私たちはとにかく2フィンガーでIOSデバイスをスクロールするために固定高さのdivを取得します...あなたはその部分を詳しく教えてください... IOS5はそれほど遠くないと思います。 .. – testndtv

+0

しかし、スクロール可能性はページを "バウンス"にします(サファリモバイルの場合はwebviewの下にグレーのものが表示されます)。それはネイティブと思われません – Ben

4

IOS 5 Webkitにはネイティブスクロール機能が追加されました。しかし、それはまだいくつかの問題がある、特にあなたが "アプリ"の感じを取得しようとしている場合。

このCSSを使用すると、ネイティブスクロールが有効になります。

.scrollme { 
    -webkit-overflow-scrolling: touch; 
    overflow:auto; 
} 

問題はdiv要素は、そのコンテナの「トップ」にすでにあるときに下方向にドラッグすると、あなたはdidnの際に、ブラウザのChromeを公開することができ、全体のHTML文書のスクロール・バウンス、で終わる、ありますそれが欲しい。しかし、純粋なCSSには回避策(javascriptなし)があります。 3つのネストされたdivのセットを使用できます。外側2を「スクロール:タッチ」に設定すると、かなり「ネイティブ」な感じを得ることができます。ここ

コード例:「位置:固定」とともにhttps://gist.github.com/1372229

プロパティ、これは物事を単純化に向けた長い道のりを行きます。ここで

+0

私はクロムを見ることができます – Ben

関連する問題