Question

I’am trying to build left/right movement into a parallax scrolling site. Everything is working except the Resize function. The resize function seems to be resizing the entire width not just the .item that the viewport is currently on. This causes some weird shifting of the elements which gets progressively worse as you move through the elements.

Here’s the 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

I think that you just need to adjust the scrolling after resizing in resizePanel() :

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

or maybe do the same effect without a timeout :

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

and update the code in your resize callback :

$(window).resize(function(){
    resizePanel( posts[position] );
}