2

jQueryをベースにしたスライディングスクリプトを少し書きました。どのスライドが現在アクティブであるかを覚えて、リロード時にこのスライドを復元するために、location.hashが更新されます。Chromeでは、これは問題なく機能します。OperaとFirefoxでは、アニメーションは奇妙な振る舞いを示しています。CSSプロパティは正しい値に更新されますが、スライドは2つのスライド間で終了します。この動作は、location.hashプロパティが更新された場合にのみ発生します。

これらの2つのメカニズムを組み合わせる場合、既知の問題はありますか？それらが互いにどのように影響するかは本当に想像できません。

関連するJavaScriptコード：

var currentPage = 0;
var lock = false;
var transitionTime = 500;

function changePage( direction ) {
    if( lock )
        return;

    var currIndex = currentPage;
    var nextIndex = currentPage + direction;

    var cPage = $( '#page' + currIndex );
    var nPage = $( '#page' + nextIndex );

    if( cPage.length == 0 || nPage.length == 0 )
        return;

    // Set lock
    lock = true;

    // Animate scrolling container
    var newPosition = -800 * nextIndex;
    $( '#scroller' ).animate( {
        left: newPosition
    }, transitionTime, function() {
        // Remove lock
        lock = false;
    } );

    currentPage = nextIndex;
    location.hash = 'page' + nextIndex;
}

jsFiddle/show/アドレスバーから 削除ナビゲーションは矢印キーを使用して行われます。

4

1 に答える 1

2

テスト後div、スクローラーが左に移動すると、ラッパーが少し左に移動しているようdivです。ラッパーの位置をに変更するdivとfixed、問題が解決します。

div#wrapper {
    height: 220px;
    left: 50%;
    margin-left: -375px;
    margin-top: -150px;
    position: fixed;
    top: 50%;
    width: 680px;
}

ハッピーコーディング！これがフィドルの例です。

于 2013-01-08T23:57:30.437 に答える