2017-07-14 3 views
0

私は画面全体を覆い、スクロールする固定要素を持っています。IOS固定要素の背後にある身体によってキャッチされるtouchmoveイベントを防止します

IOSは、人々は、この動作の例については、「バンディングをこすり」と呼ぶものは、これらのGIFファイルを見てみることができますがあります。

http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/

問題は、rubber bandingが発生し、ダウン私の固定要素を引っ張ると(オーバーレイするコンテンツを明らかにする)、オーバーレイされているコンテンツにユーザの指が入る可能性があります。

この場合、すべてのtouchmoveイベントは、画面をカバーする固定要素ではなく、固定要素がオーバーレイしている本文上で発生します。

私はあなたがこのようなmanerにスクロールから身体を防ぐことができます知っている:

body.noscroll{ 
    position:fixed; 
    overflow:hidden; 
} 

しかし、これはスクロールを防止するためのソリューションです。

touchmoveイベントがオーバーレイされたコンテンツで一度トリガーされると、ユーザーが画面から指を離した場合にのみ停止します。これは解決策ではありません。

短くても、固定要素をスクロールすることがあります。ゴムバンドが本体を露呈させるため、固定要素の代わりにゴム製のバンディングをキックしてスワイプします。

ラバーバンディングが発生した後に要素がポップしても、ユーザーが画面から指を離さない限り、touchmoveイベントはボディエレメントにまだ貼り付けられています。

私はここで何をすべきか分かりません。どういうわけか身体のtouchmoveイベントを無効にすることはいい考えのようですが、私の固定要素はそこにあり、それでもスクロール能力が必要です。

これを処理する方法に関するヒントやヒントはありますか?

編集:

A単にjsfiddle:

https://jsfiddle.net/pq88zLLx/1/

IOSでのみ動作かかわらず、あなたはラバーバンディングが明らかにされているコンテンツにスワイプする場合にのみ。

答えて

0

モバイルブラウザでは、内部にスクロールしている固定要素を処理するための優れた解決策はありません。

私はSafari以外のブラウザをテストしていませんが、他のブラウザでもこの組み合わせがあまり好きではないことを知りました。

あなたのfull screen要素をabsoluteに位置させることが最も柔軟な解決策です。これにより、スワイプと位置付けに関するよくある問題が修正されます。

私の要素がrelativeのコンテナにある場合はどうなりますか?

次に、あなたは、DOMからそれを削除して、あなたのfullscreen要素を開いているときすることができますように、DOMのように高いそれを置き、運の外にあり、あなたの要素を取得する必要があります。

その後、要素を元の位置に戻す必要があります。私が知っている最善の方法は、これを行うには、あなたが追加する/プレップするプレースホルダーを残すことです。 domには、要素の正確な位置を与えるメソッドがありません。したがって、要素の順序を変更したくない場合は、これを実行する必要があります。

改善が得られたら、この回答にコメントや意見を残してください。

関連する問題