2012-10-24 7 views
15

ズームと.scrollTop()の多数の質問とハンドリングのバリエーションを読んで最後の1時間を過ごしましたが、少なくとも20の異なるものを試しました。部分的な解決策しかありません。scrollモバイルでは機能していません

私は3つのフィールドとボタンを持つフォームを持っています。 [続行]ボタンはフォームの残りの部分を開きます。 Safariモバイルは、テキストフィールドを選択するとズームインします。特に気にしない。私がズームを防止するとフィールドを読み取るには小さすぎる可能性があり、読み取り可能なズームレベルでロードするとページの一部しか見ることができないので、ズーム動作はOKです。

ボタンがクリックされ、フォームの残りの半分が表示された後も、ウィンドウはズームインされており、ページのランダムなパッチを見ていることがあります。私は、2つのハンドリングがある可能性が想像できるものから、


1)実際にフォームの次の部分は、私はすべてを試み

を示し、ここにスクロール)ボタン
2をクリックした後にズームアウト私はズームアウトして、metaタグのviewport content widthを処理することはできませんが、ビューポートを大きくしたり小さくしたり、実際にはズームアウトしないので、私のために処理しません。潜在的にこれは他の人のために働くが、私はそれがオプションではないかもしれない多くのスタイリングを既に持っているので、私のためではない。

私はスクロールソリューションのために解決しましたが、.scrollLeft()は正常に動作していますが、.scrollTop()は私がそれを与えるセレクタに関係なく動作しません。私が試した:

$('body').scrollTop 
$('html').scrollTop 
$('document').scrollTop 
$('body,html,document').scrollTop 
$('html:not(:animated),body:not(:animated)').scrollTop 
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop 
$('#content').scrollTop // that's a wrapper div 
$(window).scrollTop 

誰もが.scrollTop()はモバイル版Safariで動作するように取得する方法を知っていますか?

+0

Safari Mobileズームが大好きです。 $(window).scrollTopはおそらくJSがズームを扱わないのでページの一番上にあると思うでしょう。ビューポートをスクロールするのではなく、フォームを下に移動させてみてください。 –

答えて

-2

これを行うためにjqueryのを使用する必要はありません:

window.scrollTo(0, 0); 

あなたはまた、メタタグを使用して、すべて一緒にズームを防ぐことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

をあなたがしているだけのページに、これを行うことができます問題が発生していますか?

0

アンカーを使用しようとしましたか?

これらはブラウザのネイティブ機能なので、どこでも動作します。このコードhere

$(function() { 
    $('a[href*="#"]:not([href="#"])').on('click', function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
1

オリジナルのポスト私はあなたが間違った方法で物事を解決しようとしていると思います。携帯電話のビューポートにフォームフィールドがfont-size: 16pxであることを確認してください。この場合、Safariは拡大しません。

position: fixedがコンテナにある場合、scrollTopが機能しないことがあります。

関連する問題