2

これは概念的な質問であるため、これに関するコードはありません。

ビューポートの上に配置したいコンテンツの上部にセクションがあるjqueryモバイルページがあります。私がやったことは、このセクションの高さに相当するサイレントスクロールを設定することです。これにより、非表示にしたいセクションのすぐ下までウィンドウがスクロールされます。

私が今抱えている問題は、ページがロードされてからサイレントスクロールがスローされるまでの間に、非表示にするセクションを見ることができる一瞬があることです。セクションを非表示にするために、silentscroll は合計 100 ピクセルずつジャンプします。これは明らかに、ページが表示された後にサイレントスクロールが実行されるためです。

ページが表示される前に、できれば pagebeforeshow イベントがスローされたときに実行されるように、scrollTop を jquery mobile に設定する方法はありますか? 私の知る限り、このイベントはすべての jquery モバイル ウィジェットが初期化された後にスローされるため、この時点でウィンドウに scrollTop を設定できませんでしたか?

私がやろうとしているのは、ユーザーがページジャンプを見る必要がないように、ページが表示される前にウィンドウに scrollTop 値を設定することです。

私はそれを自分で正しく設定できませんでした。イベントが可能かどうか疑問に思っています。

これは、私が再作成しようとしているセットアップの簡単なイメージです。緑色の四角は、ウィンドウの上にある「非表示」にしたいセクションです。青いボックスはモバイル ウィンドウを表し、灰色のボックスはドキュメントを表します。

ここに画像の説明を入力

編集: モバイル ブラウザーを確認しました。safari は、silentscroll を修正するときにジャンプやジッターがありません。IOS 上の Chrome モバイルにはジャンプ/ジッターがあります。ブラウザのパフォーマンスの問題なのか、それとも DOM/viewport の変更をキューに入れる方法なのか...

4

3 に答える 3

3

デモ: http://jsfiddle.net/gnsj6/

CSS :

.top {
    height: 200px;
    margin-top: -200px;
}

.container { 
    height: 1000px; 
}

jQuery :

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {

    $(".top").css("margin-top","0px");

});

このソリューションではジャンプに気付かない。どちらも非常に巨大なデータではありません ( http://jsfiddle.net/gnsj6/4/ )

于 2013-09-05T14:24:30.793 に答える
0

私はこのようなことを言うでしょう。非表示にしますbody( でvisibility、そうしないとスクロールできません):

....
<body style="visibility:hidden;">....

そしてjQueryでこれを行います：

$(function(){
    $('body').scrollTop('200px').css('visibility','');

});
于 2013-09-05T14:38:52.497 に答える