Jquery調整功能不起作用

Question

我試圖建立一個視差滾動網站的左/右移動。除Resize功能外，一切正常。 resize函數似乎在調整整個寬度，而不僅僅是視口當前所在的.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}); 

} 

Answer 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]); 
}