2016-01-21 22 views
9

以下のスクリプトは、Webページ内のアンカーリンクをクリックするとスムーズなスクロール効果を追加します。iOSのiframeでスムーススクロール効果が機能しない

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
    return false; 
}); 

iOSとAndroidのモバイルブラウザを含む最新のブラウザで動作します。ただし、iframe内でスクリプトを実行すると、iOSのブラウザでスムーズなscrool効果が適用されません。実際、アンカーリンクは無用にレンダリングされます(ユーザーがクリックすると何も起こりません)。 iframeの内部であっても、スクリプトはAndroidおよびほぼすべてのデスクトップブラウザで動作します。

iOSにはiframeに関するあらゆる種類の問題があります。たとえば、iframeの宣言された高さが300pxであっても、iOSはiframeの高さをコンテンツに合わせて展開し、内側にはスクロールしません。このための修正点:高さ300pxのdivにiframeをラップし、overflow: auto;-webkit-overflow-scrolling: touch;を追加します。

私の問題に戻る。このような単純なスクリプトがiOSのiframeで失敗するのはなぜですか?これは、iOSがiframeを処理する方法(前述)と関連がありますか?

iOSのiframe内で作業するにはスムーズなスクロール効果が必要です。 Iframeと親文書は両方とも同じドメインから配信されます。

誰でも、どんな考えですか?ワーキング例えば

こちらを参照してください。メインのhtmlファイルのhttp://www.nightskyinfo.com/iframe2/

ソースコード:http://www.nightskyinfo.com/iframe2/iframe.txt

:ここにiframe内に入れたhtmlファイルの http://www.nightskyinfo.com/iframe2/index.txt

源泉コードを

+0

あなたの注文を見てください。ネイティブスクロールを有効にするには、z-indexを0にする必要があります。 –

+0

ありがとうございますが、それではありません。今すぐテストしました。 – Malasorte

+0

申し訳ありませんが、試してみる価値があります))...)最後に2c))scrollIntoView()を試してみました –

答えて

5

スクリプトがiframe内で実行されている場合、jQueryセレクタ$はifrの要素を探しますameの文書であり、親文書ではない。これはセレクタのコンテキストです。親文書内の要素を探すには、実際には$('html, body', parent.document)(またはtop.document)を実行して親文書を指定できます。

ただし、フレームから親文書にアクセスするには、フレームドメインは、親ドメインと同じである必要があります。その点を確認してください。

最後にスクロールする必要があるのは、あなたの要求では分かりません。親のものかフレームのものか?

もう一つは、あなたがこれを達成しようとしているものを手に入れることができません。

$($.attr(this, 'href')).offset().top 

私見を、このセレクタは何も一致しません。あなたは... href値として

をCSSセレクタを格納している場合を除き、私はあなたがでシンプルな何か(およびところで作業)を探していると思います:

$(this).offset().top 

希望は私が助けました。

+0

フレームドドキュメントでスクロールする必要があり、両方のドキュメントが同じドメインから配信されます。セレクタのコンテキストを説明してくれてありがとう、私は今理解しています。これでいくつかのテストを続けます。 – Malasorte

関連する問題