1

jQueryとscrollToプラグインを使用して、最初の 1 ページの水平 Web サイトを開発しています。サイトには 3 つの画面があり、中央から始まります (中央の画面が表示されます)。これを達成するための私にとっての論理的なアプローチは、各画面に を持つ<body>ようにすることでした。をクリックすると、jQuery によって別の画面が表示され、左または右に移動します。width:300%;width:33.3333%;<a>

これはうまく機能しますが、ウィンドウのサイズを変更しようとすると、すべての構造が失われ、幅が意味をなさなくなります。これを修正するために何ができるか知りたいのですが、もっと重要なのは、なぜこれが起こるのかを理解したいということです.

フィドルさんです。ウィンドウのサイズを変更すると、何が問題なのかがわかります。ありがとう！

4

5 に答える 5

1

これを追加 ：

http://jsfiddle.net/EAzS9/1/

$(window).resize( function () {
    window.scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
​
于 2012-07-27T01:28:45.600 に答える
1

scrollTo プラグインを使用している場合、スクロールする場所を指定するときに「DOM 要素 (論理的には、スクロール可能な要素の子)」を使用しないのはなぜですか? あれは：

 $('html, body').scrollTo($('div#right'), 800);
于 2012-07-26T20:38:13.473 に答える
1

ルークの回答のコメントの1つで、最後にどこにいたかを覚えておく必要があると述べたように、これを再評価しました。

現在の場所を追跡し、サイズ変更後にそこに戻る必要があります。
次のようなコードを使用します。 

var lastPosition = "middle";
var $body = $('html, body');

window.scrollTo(($(document).width() - $(window).width()) / 2, 0);

$('#go_left').click(function() {
    $body.scrollTo('0px', 800);
    lastPosition = "left";
});
$('#go_right').click(function() {
    $body.scrollTo('100%', 800);
    lastPosition = "right";
});
$('#left_link').click(function() {
    $body.scrollTo('50%', 800);
    lastPosition = "middle";
});
$('#right_link').click(function() {
    $('html, body').scrollTo('50%', 800);
    lastPosition = "middle";
});

$(window).off('resize.menu').on('resize.menu', function() {    
    switch(lastPosition)
    {
        case "left":
            $body.scrollTo('0px', 0);
            break;
        case "middle":
            $body.scrollTo('50%', 0);
            break;
        case "right":
            $body.scrollTo('100%', 0);
            break;
    }
})​

デモを見る

また、 body 要素をキャッシュしたので、スクロール時に常に再トラバースする必要はありませんが、パフォーマンスはほとんど向上しません。

前と同じように、ページを離れるときは忘れずにイベントのバインドを解除してください。そうしないと、メモリ リークが発生する可能性があります。

私はまだ遅れている再配置を取り除くことができていませんが、それは後で取り組むべきことです.

編集
最後に、サイズ変更時のラグ/ちらつきを最小限に抑える方法を見つけました。

代わりにサイズ変更メソッドで使用scrollLeft()すると、完璧/完璧ではなく、はるかにうまく機能します。

$(window).off('resize.menu').on('resize.menu', function() {    
    var elementToScrollTo = "div#main";

    switch(lastPosition)
    {
        case "left":
            elementToScrollTo = "div#left";
            break;
        case "middle":
            elementToScrollTo = "div#main";
            break;
        case "right":
            elementToScrollTo = "div#right";
            break;
    }

     $(window).scrollLeft($(elementToScrollTo).position().left);
})

更新されたデモ

于 2012-07-26T20:41:03.510 に答える
1

$(window).resize(function() { $('html, body').scrollTo('50%', 0); });

このコードは、ウィンドウサイズが変更されるほぼすべてのピクセルに対して呼び出されるため、幅を再計算する必要がないという理由だけで、フランソワの回答よりも少し遅れている可能性があります。

于 2012-07-26T20:46:03.980 に答える
0

scrollToを使用している場合、パーセンテージ値を入力しても、それは絶対ピクセル値として設定されます。ウィンドウのサイズを変更しても、「サイズ変更」イベントでイベントハンドラーをコーディングしてスクロール値を再計算しない限り、その絶対ピクセル値は変更されません。しかし、私があなたなら、このようなものの絶対ピクセル値で作業します。.page各divの幅をピクセル単位で定義し、それらすべてを非常に大きな幅のdivでラップして、将来のページが収まるようにします。次に、スクロールする代わりにleft、ラッパーのオフセットを設定します。オリジナルのコーダスライダーはこのテクニックを使用していましたが、現在のコーダスライダーは今でも使用していると思います。

于 2012-07-26T20:41:18.567 に答える