0

（サイトへのリンクは作者により削除されています）

状況は、ページに 2 つのシェブロン アンカー ( <a>) がある場合です。(それらは JavaScript を介して DOM に追加されました) 1 つは「前へ」で、もう 1 つは「次へ」です。「次へ」アンカーをクリックすると、toNextSection()関数がトリガーされ、ページが次のセクションにスクロールします。逆も同様です。

これはすべてのデスクトップ ブラウザーで機能しますが、iPad では奇妙です。

元々、2 つのシェブロンは「クリック」イベントにバインドされていました。次に、iPadの問題を修正するためにコードを次のように変更しようとしましたが、問題は残ります。したがって、問題はイベントの種類ではないと思います。

var clickEvent = navigator.platform.match(/iPad/i) ? 'touchstart' : 'click';
$('#sectionnav .prev a').on(clickEvent, function() { toPrevSection() });
$('#sectionnav .next a').on(clickEvent, function() { toNextSection() });


iPad の問題についてこれまでに収集した情報がいくつかあります。

  • 「次へ」のシェブロンを初めてタップすると、ページは次のセクションに正常にスクロールします。ただし、その後はいずれのシェブロンもタップできなくなります。もう一度タップしても何も起こりません。

  • toPrevSection()関数のすべての内容を 1 行に置き換えてみました: alert('Test');、[前の] シェブロンをタップすると、常に警告ボックスが正常に表示されます。ただし、前述のように、「次へ」のシェブロンをタップしてページを次のセクションにスクロールした後、「前へ」のシェブロンをタップすると、警告ボックスが表示されなくなります。

  • setInterval('toNextSection()', 10000);または試してみsetInterval(function() { $('#sectionnav .next a').trigger('touchstart') }, 10000);ましたが、ページは自動的に最後まで正常にスクロールできます。

  • 「次へ」のシェブロンをタップする前に手動でページを少し前方にスライドさせると、「次へ」のシェブロンをタップしてもページをスクロールできなくなります。

新着：

  • フッターのロゴや画像など、他の要素にクリック イベントをバインドすることも試みました。そして、問題は同じです。1 回目はタップしても機能し、2 回目は何もしません。

  • 「次へ」のシェブロン (またはクリック イベントにバインドされているもの) をタップしてページを次のセクションにスクロールすると、ページ上のすべてのハイパーリンクとフォーム ボタンが機能しなくなります (それらをタップしても何も起こりません)。

  • ページが自動スクロールに設定されている場合 (setInterval上記)、ページが自動スクロールを開始する前に「次へ」のシェブロンをタップしても機能します (自動スクロールも機能します)。しかし、ページが自動スクロールを開始すると、ページ上のすべてのハイパーリンクとフォーム ボタンが機能しなくなります (それらをタップしても何も起こりません)。


どんなアドバイスでも大歓迎です。ありがとう！

4

2 に答える 2

1

画面が変化しているため、ボタンの上に配置されている他の要素がボタンに触れるのを妨げているかどうかを確認しましたか?
ボタンの z-index を変更して「より高く」配置することもできますが、それは位置プロパティが絶対または相対である場合にのみ機能します。

わかった

このページのポイント 5 を参照してください。iOS サファリのタッチ イベントについてです。 https://developer.apple.com/library/safari/#technotes/tn2010/tn2262/_index.html

于 2012-07-14T16:50:37.543 に答える
1

実際にはiOSデバイス（およびシミュレーター）でのみ発生するため、デバッグが困難です。これは JavaScript とは関係なく、ページのスクロールと要素の配置、および iOS での処理方法とは関係がないことはほぼ確実です。これは、iOS Safari のバグである可能性もあります (以下を参照)。

ほとんどのリンク ( next、previous、など) はTwitter、Facebookページが正確な元の位置にある場合にのみ機能するようです (これについて言及しました)。たとえば、 をクリックnextしてから、スクロールして最初に戻り、nextもう一度クリックします。そのため、ボタンは表示されているように見えますが、クリック可能な領域は元の場所にあり、表示領域の外にあります。

別の観察：あなたが言ったように、あなたがクリックした後、あなたのリンクはどれも機能しませんnext. ただし、右にスクロールした後にページをリロードしても効果はnextありpreviousませんが (ページは以前の場所に自動的にスクロールされます)、他のすべてのリンクは機能します。

これに言及している別の質問を見つけて、iOS 5.1 シミュレーターでこの奇妙な動作をまだ示している簡単なサンプル ページを提供しています。提案された解決策 (現在 16 の賛成票)は、 set position:relative、スクロールしてから、position:fixed再度設定することです (ちなみに、これは iOS5 からのみサポートされていますが、それがあなたが使用しているものだと思います)。その例とは対照的に、ページのどこかでクリック可能な領域を見つけることができませんでした。

その回避策を試すことに加えて、これを解決するために次のことをお勧めします。

  • ポジショニングが機能するまでスタイルを下げてみてください。多くの要素がありますposition:absolute。position:fixed

  • scrollイベント ハンドラーのリンクを解除します。これは、問題の潜在的な原因であることに加えて、サイトの使用を実際に妨げています。せいぜい、コンテンツの配置と垂直スクロールを完全に分離するだけです。これが視差効果に何を意味するのかはよくわかりません。

これが役に立ち、この問題を解決できることを願っています。

編集:報告されたバグがあります (ステータスduplicate– オリジナルは見つかりませんでした)。また、別の回答で説明されている修正が機能しました。

于 2012-07-15T10:50:27.663 に答える