全屏滚动封装PC端

jiezi

5 年前

函数调用 new FullScreenScroll(obj)
obj 参数说明：
{
outerTag: ‘ 大盒子标签名（String）’,
outerId: ‘ 大盒子 id 名（String）’,
outerClass: ‘ 大盒子类名（String）’,
tipTag: ‘ 侧导航每层盒子标签名（String）’,
tipId: ‘ 侧导航每层盒子 id 名（String）’,
tipClass: ‘ 侧导航每层盒子类名（String）’
}
Tag、Id、Class 任选一个传入

兼容 Google、火狐、IE7 及以上。
如果想兼容 IE 最好传 id 或者标签名类名没做处理或者可以自己再处理一下。

function FullScreenScroll(obj){
    // 外层盒子
    if(obj.outerTag){this.ul = document.getElementsByTagName(obj.outerTag)[0];
    }else if(obj.outerId){this.ul = document.getElementById(obj.outerId);
    }else{this.ul = document.querySelector('.'+obj.outerClass);
    }
    // 内层每层盒子
    this.ulli = this.ul.children;
    // 侧导航每层盒子
    if(obj.tipTag){this.ol = document.getElementsByTagName(obj.tipTag)[0];
    }else if(obj.tipId){this.ol = document.getElementById(obj.tipId);
    }else{this.ol = document.querySelector('.'+obj.tipClass);
    }
    this.olli = this.ol.children;
    // 定时器
    this.timer = null;
    // 控制滚动的开关 防止滑动过快
    this.flag = true;
    // 获取卷去的高度 兼容写法
    this.docTop = document.documentElement.scrollTop||document.body.scrollTop;
    // 规定盒子的初始位置的下标
    this.num = Math.round(this.docTop/this.ulli[0].offsetHeight);
    // 初始化元素信息
    this.eleInit()
    // 初始化函数
    this.init()
    var _this = this
    this.addEvent(window,'resize',function(){for(var i=0;i<_this.ulli.length;i++){_this.ulli[i].style.height = document.documentElement.clientHeight + 'px';
        }
    })
}
// 初始化元素信息
FullScreenScroll.prototype.eleInit = function(){this.ul.style.height = document.documentElement.clientHeight*this.ulli.length + 'px';}
// 初始化函数 
FullScreenScroll.prototype.init = function(){
    // 给每个侧导航添加点击事件
    for(var i=0;i<this.ulli.length;i++){
        var that = this;
        this.olli[i].index = i;
        this.ulli[i].style.height = document.documentElement.clientHeight + 'px';
           this.olli[i].onclick = function(){clearInterval(that.timer)
               // 动画实现跳转 15-24 起点、终点、步长
               // 终点
               var target = this.index*that.ulli[0].offsetHeight;
               that.num = this.index;
               that.move(target)
           }
       }
       // 滚动事件处理
       var _this = this;
       this.Mousewheel(this.ul,function(){
           // 向上滚动处理函数
        if(_this.flag){
            _this.flag = false;
            clearInterval(_this.timer)
            if(_this.num>0){_this.num--;}else{_this.num=0}
            var target = _this.num*_this.ulli[0].offsetHeight
            _this.move(target)
        }
    },function(){
        // 向下滚动处理函数
        if(_this.flag){
            _this.flag = false;
            clearInterval(_this.timer)
        if(_this.num<_this.ulli.length-1){_this.num++;}else{_this.num=_this.ulli.length-1;}
        var target = _this.num*_this.ulli[0].offsetHeight;
        _this.move(target)
        }
    })
}
// 每屏运动的函数 target 滚动结束位置
FullScreenScroll.prototype.move = function(target){
    var _this = this;
    this.timer = setInterval(function(){
        // 滚动起点
        // var leader = document.documentElement.scrollTop||document.body.scrollTop;
        var leader = _this.ul.offsetTop;
        // 步长 距离 /n
        var step = (-target-leader)/10;
        // 当步长过小时 根据向上运动 (step<0) 或向下运动(step>0) 即 target-leader 大于 0 或小于 0 向上取整或向下取整控制步长，否则步长一直减小，不会到达终点。step = step>0?Math.ceil(step):Math.floor(step);
        // 判断是否到达终点
        // 会有 target-leader 不够一个步长的情况 这个时候会发生抖动
        if(Math.abs(-target-leader)<step){
            // 如果出现这种情况 就直接让它到 结束的位置 target
            _this.ul.style.top = -target + 'px';
            clearInterval(_this.timer)
        }else if(leader!=-target){
            // 如果没有这种情况 就正常的一步一步改变 leader 直到到达 结束位置
            leader+=step
            _this.ul.style.top = leader + 'px';
        }else if(leader==-target){
            _this.flag = true
            clearInterval(_this.timer)
        }
    },15)
}
// 滚轮事件 兼容写法 obj 操作对象 upfn 向上滚动执行函数 downfn 向下滚动执行函数
FullScreenScroll.prototype.Mousewheel = function(obj,upfn,downfn){this.addEvent(obj,"mousewheel",wheel);
    this.addEvent(obj,"DOMMouseScroll",wheel);
    function wheel(e){
        var ev = window.event||e;
        var dir = -ev.detail||ev.wheelDelta
        // ev.detail firefox
        // ev.wheelDelta ie google
        if(ev.preventDefault){ev.preventDefault();
        }else{ev.returnValue = false;}
        if(dir>0){upfn();
        }else{downfn();
        }
    }
}
// 监听事件兼容写法 obj 操作对象 type 事件类型 fn 回调函数
FullScreenScroll.prototype.addEvent = function(obj,type,fn){if(document.addEventListener){obj.addEventListener(type,fn,false);
    }else{obj.attachEvent("on"+type,fn);
    }
}
// 调用
new FullScreenScroll({
    outerTag:'ul',
    tipTag:"ol"
})

当然啦！html 和 css 就需要自己写了。
这里有一个简单的丑陋的 dome。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        ul, ol {list-style: none;}

        html, body{
            width: 100%;
            height: 100%;
        }

        ul{
            width: 100%;
            font-size: 100px;
            text-align: center;
            line-height: 500px;
            position: absolute;
            top: 0;
            left: 0;
        }

        ol {
            position: fixed;
            top: 50px;
            left: 50px;
        }

        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    
    <script>
        // 这里写上面封装的函数
    </script>
</body>
</html>

全屏滚动封装PC端

使用说明

兼容性

js 代码如下

HTML、CSS 代码