以下のスクリプトは、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源泉コードを
あなたの注文を見てください。ネイティブスクロールを有効にするには、z-indexを0にする必要があります。 –
ありがとうございますが、それではありません。今すぐテストしました。 – Malasorte
申し訳ありませんが、試してみる価値があります))...)最後に2c))scrollIntoView()を試してみました –