实现小小的fullpage(二)

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

问题

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

解决问题

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

resize事件

$(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;
    }
}

move操作做了几点优化

1. 增加predi用来保留之前的偏移值。因为在第一屏时，最大化窗口。其实是没有发生滚动的。

2. 将过渡效果提取到transition css类中。

3. 增加bAnimation参数，用来控制是否过渡。

小结

在实际项目中不可能为了这一点点需求，而引入一个完整的fullpage库。而自己造简单的轮子也不可能考虑到很全面。只是对于这个项目很适合也能满足。而遇到问题，尽量做简单处理，便于维护。

本文地址http://xiaoqiang730730.github...
完整例子http://xiaoqiang730730.github...