實現小小的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...