jquery - Jquery调整大小功能不起作用

Question

我正在尝试将左/右运动构建到视差滚动站点中。除了调整大小功能外，一切正常。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] );
}