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