iOS Safariで動作する「固定的な」固定位置のアイテムを作成する

iOSのサファリでは、ユーザーがパンニングを停止するまで、ワン​​・フィンガー・パニングはイベントを生成しません。 onscrollイベントは、ページの移動と再描画が停止したときにのみ生成されます。

リアルタイムのスクロールを検出する方法が必要です。具体的には、iOSのサファリでも動作する固定メニューを作成したいと考えています。非モバイルブラウザでは、オンスクロールイベントを聞きながら要素の「相対位置」と「位置固定」を切り替えることでスティッキメニューを実行できます。 onscrollイベントが連続的に発生しないため、このメソッドはモバイルブラウザでは機能しません。私に何ができる?

18
1つの(ただし、ハッカーのような)方法は、独自の垂直パンジェスチャを認識させ、それをウェブビューに追加することです。そうすれば、-stateプロパティを使ってイベントを受け取ることができます。
追加された 著者 CodaFi,
タッチにバインドして、ページのyを移動してモニタする
追加された 著者 sciritai,

5 答え

Answering my own question. iOS7 now support position:sticky Demo: http://html5-demos.appspot.com/static/css/sticky.html

11
追加された

確かに古い話ですが、私はここでたくさんの訪問を見ることができます。あなたが望むならば、固定されたメニューです。固定された配置を使用することができます。そこにiScrollの必要はありません。

3
追加された
私の解決策よりはるかにサポートの少ない解決策が見つかりました...そして、私はあなたの声明に同意していません:固定: caniuse.com/css-fixed
追加された 著者 curly_brackets,
それには何が違うのですか? 「iOS Safariの部分的なサポートとは、バグのある動作を指します。モバイルブラウザの約50%でバグがありますか?
追加された 著者 Thomas McCabe,
多くのモバイルブラウザでは、固定配置がうまくサポートされていないことに注意してください。詳細はこちら: bradfrostweb.com/blog/mobile/fixed-position
追加された 著者 Jonathan Stark,

私は最近、同じ問題のための実用的な解決策を見出そうと多くの時間を費やしました。これを行う正しい方法はありませんが、いくつかの適切なハッキングがあります(そのほとんどはすでに言及されています)。問題は、ユーザーがスクロールしている間にJavaScriptが一時停止していることです。その意味を考慮すると意味がありますが、固定配置要素を実装するのは難しいです。

私が見つけた一番のことは、Googleの人々がこの素晴らしい投稿をしたことです。モバイルSafariで http://gmail.com をチェックして実際の行動を確認することができます。

https://developers.google.com/mobile/articles/webapp_fixed_ui

お役に立てれば。

3
追加された
そのリンクはDevelopersのホームページにリダイレクトされます。私が見つけた最高のものはarchive.orgでした: web.archive.org/web/20141001100814/https://…
追加された 著者 duncan,

同様の問題があり、jqueryを使用して1本の指のスクロールを検出することでtouchstart/touchmove/touchendにハンドラがバインドされ、完全に機能しました。私の場合、別の要素の移動を試行したのと同じ量だけ別の要素を移動する必要があり、スクロールが試行されたときにうまく更新され、必要条件に適しているはずです。

2
追加された

スティッキーメニューが欲しい場合は、既存のライブラリを使用して頭痛を軽減することができます。私はiScrollで成功しました:

http://cubiq.org/iscroll

少なくとも、これがどのように機能するかを見て、それに基づいてソリューションを構築することができます。

ハッピーハッキング!

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript