jquery滚屏效果

//2017-11-13

基于jquery的滚屏效果

//滚屏
$.fn.vo_rollingScreen = function(fn){
    if(!$(this).length || !$(this).children().length){return}
    var $children =$(this).children();
    var len = $children.length;
    var state = true;
    var heightGroup = [];
    var offset = {
        top : 0
    }
    //初始化高度
    $children.each(function(i){
        var $self = $(this);
        var top = $self.offset().top;
        //前补位
        if(i == 0 && top > 0){
            offset.top = 1;
            heightGroup.push(0);
        }
        heightGroup.push(top);
        //后补位
        if(i == len - 1){
            var docHeight = $(document).height(),
                height = $self.outerHeight(true);
            if(docHeight > height + top){
                heightGroup.push(height + top);
            }
        }
    });
    //获取当前滚动条区间
    function getIndex(detial){
        var scrollTop = $(document).scrollTop();
        var index;
        for(var i = 0,len = heightGroup.length; i < len; i++){
            //第一个
            // if(i == 0 && scrollTop < heightGroup[i]){
            //     index = 0;
            //     break;
            // }
            //最后一个
            if(i == len - 1 && scrollTop > heightGroup[i]){
                index = i;
                break;
            }
            //相等
            if(scrollTop == heightGroup[i]){
                index = detial > 0 ? i - 1 : i + 1;
                index = index < 0 ? 0 : index;
                index = index >= len ? i : index;
                break;
            }
            //中间位置
            if(scrollTop > heightGroup[i] && scrollTop < heightGroup[i + 1]){
                index = detial > 0 ? i : i + 1;
                break;
            }
            
        }
        return index;
    };
    //滚动
    function rolling(detial){
        var index = getIndex(detial);
        state = false;
        //移动滚动条
        $('html,body').stop(true).animate({
            scrollTop : heightGroup[index]
        },200,'linear',function(){
            state = true;
        });
        if(typeof fn == 'function'){
            var realIndex = index - offset.top;
            realIndex = realIndex >= len ? -2 : realIndex;
            fn(index,realIndex);
        }
    };
    //鼠标滚轮
    $('body').vo_mouseWheel(function(detial){
        if(!state){return}
        rolling(detial);
    });
};

使用：

<style>
    html,body{overflow: hidden}
    .content{
        padding: 0;
    }
</style>
<div style="background:black; color:#ffffff; height:200px;">头部</div>
<div data-node="rolling-screen" style="position:relative">
    <div style="background:red; height:1000px;">1</div>
    <div style="background:green; height:1000px;">2</div>
    <div style="background:yellow; height:1000px;">3</div>
    <div style="background:blue; height:1000px;">4</div>
    <div style="background:orange; height:1000px;">5</div>
</div>
<div style="background:black; color:#ffffff; height:200px;">底部</div>
$("[data-node='rolling-screen']").vo_rollingScreen(function(index,realIndex){
        console.log(index);
        console.log(realIndex);
    });