清理SerialScroll调整大小功能

Question

问候

我仍然是JavaScript和Jquery的新手，我知道必须有一个比我使用的方法更好的方法。

我正在进行serialScroll实现。有一个主滚动控件可以控制多个幻灯片的左/右移动。每张幻灯片都包含它自己的垂直serialScroll实现。我在scrollTo上调整大小并且在垂直工作上调整大小但是我无法想出一个优雅的方法来确保在调整大小时当前位置保持居中，我当前的方法有效但效率非常低。

$(function(){

var $up = $('#sec1_nav a.up').hide();//up button -- each slide needs it's own unique nav buttons
var $down = $('#sec1_nav a.down');//down button -- each slide needs it's own unique nav buttons 

        $('#screen1').serialScroll({
            target:'#section1',
            items:'.item', 
            prev:'#sec1_nav a.up',
            next:'#sec1_nav a.down',    
            axis:'y',
            duration:1000,
            force:true,
            cylce: false,

            onBefore:function( e, elem, $pane, $items, pos ){
            $up.add($down).show();  
            if( pos == 0 )$up.hide();
                else if( pos == $items.length -1 )
                    $down.hide();

                   // Here's where it get ugly, I'am adding a unique class for each slide to the item's
            $('.item').removeClass('pos1'); //Each slides need's it's own class i.e. slide1 = pos1, slide2 = pos2 etc.
                    $(elem).addClass('pos1');
                }                   
            }); 
            $(window).bind("resize", function(){
                resize1(); // Same goes for the resize function, each slide need's it's own function.
            });     
    });
    function resize1() {

    height = $(window).height();
    width = $(window).width();

    mask_height = height * $('.item').length; // sets the new mask height 

    // Resize Height of the area
    $('.sections').css({height: height, width : width});
    $('.item').css({height: height, width : width});
    $('#mask').css({height : mask_height, width : width});

    $('.sections').scrollTo('.pos1', 0 ); // This issue is where it all fall apart, instead of using serialScroll, i'am stuck using scrollTo to maintain the current slide position.
}