之前写的一个小小的fullpage,今天又来第二弹了。因为遇到了问题，值得这次记录下来。

问题

之前写的fullpage看似完美，简单易移植。但是今天测试给我提了个bug。说当滚动了一屏之后，再最大化或者最小化窗口的时候就会没有占满屏幕。

解决问题

这个一定是缺少监听resize事件了。

resize事件

1
2
3

$(window).on('resize', function() {
    $container.find('.slide').css('height', $container.height() + 'px');
});

很简单。只要监听resize事件，然后将每个slide的高度给重新设置高度。

但是当前current在第二屏的时候，当最大化的时候，第一屏的高度增加了，但是外层的scrollContainer的偏移并没有改变，所以还得在调用一次page的move方法。

$(window).on('resize', function() {
    $container.find('.slide').css('height', $container.height() + 'px');
    page.move(current);
});

过渡问题

接着上面，在最大化后重新调用一次move操作。但是默认是有过渡效果的，这样用户感觉就怪怪的。所以就要去取消过渡效果。

move: function(index, bAnimation) {
    var di = -(index-1)*$container.height();
    page.start = +new Date();
    if(di !== predi) {
        page.isScrolling = true;
        if(bAnimation) {
            $scroll.removeClass('transition');
            $scroll.css('transform', 'translateY('+di+'px)');
            page.isScrolling = false;
        }else {
            $scroll.addClass('transition');
            $scroll.css('transform', 'translateY('+di+'px)');
        }
        predi = di;
    }else {
        page.isScrolling = false;
    }
}