0

視差スクロール サイトに左右の動きを構築しようとしています。サイズ変更機能以外はすべて機能しています。サイズ変更機能は、ビューポートが現在オンになっている .item だけでなく、幅全体のサイズを変更しているようです。これにより、要素を移動するにつれて徐々に悪化する要素の奇妙なシフトが発生します。

JavaScript は次のとおりです。

    function scrollToPosition(element) {
if (element !== undefined) {
    $(".cont").scrollTo(element, 800, {
        margin: true
    });
 }
}

$(document).ready(function() {

var posts = $('.item');
var position = 0; //Start Position
var next = $('#next');
var prev = $('#prev').hide();

next.click(function(evt) {
    //Scroll to next position
    prev.show();
    scrollToPosition(posts[position += 1]);
    if (position === posts.length - 1) {
        next.hide();
    }
});

prev.click(function(evt) {
    //Scroll to prev position    
    next.show();
    scrollToPosition(posts[position -= 1]);
    if (position === 0) {
        prev.hide();
    }
});

$(window).resize(function () {
    resizePanel();
});

});

function resizePanel() {

width = $(window).width();
height = $(window).height();

mask_width = width * $('.item').length;

$('#cont').css({width: width, height: height});
$('.item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});

}
4

1 に答える 1

1

でサイズ変更した後、スクロールを調整するだけでよいと思いますresizePanel()：

function resizePanel(currentElement) {
    //resize items
    scrollToPosition(currentElement);
}

または、タイムアウトなしで同じ効果を実行することもできます:

function resizePanel(currentElement) {
    //resize items
    $('.cont').scrollTo(currentElement, 0, {margin: true});
}

resizeコールバックのコードを更新します。

$(window).resize(function(){
    resizePanel( posts[position] );
}
于 2012-07-12T17:26:56.920 に答える