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

Jquery调整大小功能不起作用

1 个答案: