web-dev-qa-db-ja.com

iOSSafariで機能する「スティッキー」な固定位置アイテムの作成

IOSサファリでは、ユーザーがパンを停止するまで、1本の指でパンしてもイベントは生成されません。 onscrollイベントは、ページの移動と再描画が停止した場合にのみ生成されます。

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

18
woran

私自身の質問に答えます。 iOS7がposition:stickyデモをサポートするようになりました: http://html5-demos.appspot.com/static/css/sticky.html

11
woran

私は最近、同じ問題の実用的な解決策を考え出すために何時間も費やしました。いくつかのまともなハックがありますが、これを行う正しい方法はありません(それらのほとんどはすでに述べています)。問題は、ユーザーがスクロールしている間、JavaScriptが一時停止することです。影響を考慮すると理にかなっていますが、固定位置の要素を実装するのは非常に困難です。

私が見つけた最高のものは、グーグルの人々によるこの素晴らしい投稿です。モバイルサファリで http://gmail.com をチェックして、実際の動作を確認できます。

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

お役に立てれば。

3
mikekavouras

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

2
Chris A

スティッキーメニューだけが必要な場合は、既存のライブラリを使用することで、頭痛の種を減らすことができます。私はiScrollで成功しました:

http://cubiq.org/iscroll

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

ハッピーハッキング!

0
Dan M