全屏滚动的原理

下面代码是用vue来写的

1、HTML结构

<template>
    <div id="wrap">
        <div id="main">
            <div class="page">1</div>
            <div class="page">2</div>
            <div class="page">3</div>
            <div class="page">4</div>
        </div>
    </div>
</template>

 

2、CSS样式

wrap块为窗口可看到的部分，通过absolute等属性设置占满窗口，并为其设置为：overflow:hidden属性，使得窗口不出现滚动条，只显示窗口大小的一页内容。

设置main区域，定位为relative,通过改变main块的 top 属性实现不同页面的切换，具体的css代码如下：

<style lang="less" scoped>
#wrap{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:hidden;
    background:rgb(15, 221, 211);
    #main{
        width:100%;
        position:relative;
        .page{
            width:100%;
            margin:0;
            font-size: 20px;
            &:nth-child(1) {
                background:rgb(195, 185, 240);
            }
            &:nth-child(2) {
                background: rgb(15, 221, 211);
            }
            &:nth-child(3) {
                background: rgb(236, 173, 217);
            }
            &:nth-child(4) {
                background: rgb(241, 161, 141);
            }
        }
    }
}
</style>

3、JavaScript代码逻辑（对滚动事件的函数绑定）

要考虑到鼠标滚动事件的兼容性：

（1）大多数浏览器提供了mousewheel事件

（2）Firefox 3.5+不支持，但支持相同作用的事件：DOMMouseScroll

（3）滚动属性值的区别：

　　① mousewheel事件：event.wheelDelta 返回的如果是正值说明滚轮是向上滚动
　　② DOMMouseScroll事件：event.detail 返回的如果是负值说明滚轮是向上滚动

同时每页高度为 document.body.clientHeight+px，代码如下

<script>
export default {
    data() {
        return {
            now: 0,
            startTime: 0,
            endTime: 0,
            length: 0,
        }
    },
    mounted() {
        this.length = document.body.clientHeight;
        var pages = document.getElementsByClassName('page');
        for(let i = 0; i<pages.length; i++) {
            pages[i].style.height = this.length + 'px'
        }
        /* 区分浏览器
            大多数浏览器提供了mousewheel事件，
            Firefox 3.5+不支持，但支持相同作用的事件：DOMMouseScroll; 
        */
        if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
            document.addEventListener('DOMMouseScroll', this.scrollFun);
        }else if(document.addEventListener){
            document.addEventListener('mousewheel', this.scrollFun, false)
        }else if(document.attachEvent){ // IE
            document.attachEvent("onmousewheel", this.scrollFun);
        }else {
            document.onmousewheel = this.scrollFun;
        }
    },
    methods: {
        scrollFun(e){
            var main = document.getElementById('main');
            this.startTime = new Date().getTime();
            var event = e || window.event;
            /*  mousewheel事件：event.wheelDelta 返回的如果时正值说明滚轮是向上滚动的；
                DOMMouseScroll事件：event.detail 返回的如果时负值说明滚轮是向上滚动，
                每页高度为 document.body.clientHeight+px;
            */
            var dir = event.wheelDelta || -event.detail;
            if(this.startTime - this.endTime > 200) {
                if(dir > 0 && this.now > -3 * this.length) {
                    this.now -= this.length;
                    main.style.top = this.now + 'px';
                    this.endTime = new Date().getTime(); 
                }else if(dir < 0 && this.now < 0){
                    this.now += this.length;
                    main.style.top = this.now + 'px';
                    this.endTime = new Date().getTime(); 
                }
            }else {
                // event.preventDafault();
            }
        }
    }
}
</script>

 

 

以上代码参考大神，并做了部分改动