zoukankan      html  css  js  c++  java
  • CSS 实现全屏滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang = "zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>全屏滚动</title>
    <style type="text/css">
    html,body{  
        margin: 0;  
        padding: 0;  
    }  
    #wrap{  
        width: 100%;  
        overflow: hidden;  
        background: #ccc;  
    }  
    #main{  
        width: 100%;  
        background: #ccc;  
        position: relative;  
    }  
    .page{  
        width:100%;  
        margin:0;  
    }  
    #page1{  
        background:#E4E6CE;  
    }  
    #page2{  
        background:#6CE26C;  
    }  
    #page3{  
        background:#BF4938;  
    }  
    #page4{  
        background:#2932E1;  
    }  
    </style>
    </head>
    <body>
    <div id="wrap">  
        <div id="main">  
            <div id="page1" class="page">page1</div>  
            <div id="page2" class="page">page2</div>  
            <div id="page3" class="page">page3</div>  
            <div id="page4" class="page">page4</div>  
        </div>      
    </div>
    <script>
        var pages = document.getElementsByClassName("page");  
        var wrap = document.getElementById("wrap");
        var len = document.documentElement.clientHeight;  
        var main = document.getElementById("main");  
        wrap.style.height = len + "px";  
        for(var i=0; i<pages.length; i++){  
            pages[i].style.height = len + "px";  
        }  
        if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
            document.addEventListener("DOMMouseScroll",scrollFun);  
        }else if(document.addEventListener){  
            document.addEventListener("mousewheel",scrollFun,false);  
        }else if(document.attachEvent){  
            document.attachEvent("onmousewheel",scrollFun);  
        }else{  
            document.onmousewheel = scrollFun;  
        }  
        var startTime = 0;  
        var endTime = 0;  
        var now = 0;  
        function scrollFun(e){  
            startTime = new Date().getTime();  
            var event = e || window.event;  
            var dir = event.detail || -event.wheelDelta;  
            if(startTime - endTime > 1000){  
                if(dir>0 && now > -3*len){  
                    now -= len;   
                    main.style.top = now +"px";  
                    endTime = new Date().getTime();  
                }else if(dir<0 && now < 0){  
                    now += len;  
                    main.style.top = now +"px";  
                    endTime = new Date().getTime();  
                }  
            }else{  
                event.preventDefault();      
            }  
        }  
    </script>  
    </body>
    </html>

     wrap块为窗口可看到的部分,我们可以通过js获取窗口可视区的大小,并为其设置overflow: hidden属性,使得窗口不出现滚动条,只显示窗口大小的一页内容;

    设置main定位为relative,通过改变main块的top属性实现不同页面的切换。

    js代码的主要部分就是对滚动事件的函数绑定,大多数浏览器提供了 “mousewheel” 事件,Firefox 3.5+不支持,但支持相同作用的事件:”DOMMouseScroll”;

    mousewheel事件“event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动;

    DOMMouseScroll事件“event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动;每页高度为document.body.clientHeight+’px’;

    参考:http://blog.csdn.net/rita_jing/article/details/78236768

  • 相关阅读:
    C++ 模板实现败者树,进行多路归并
    CentOS 7 使用 Realtek 8188eu 上网 (解决 Required key not available)
    C++ Concurrency in Action 读书笔记
    Linux操作系统是如何工作的
    大型项目使用Automake/Autoconf完成编译配置
    Socket 用于进程间通信 --- UNIX Domain Socket
    在Linux中实现类似windows中获取配置文 件的函数GetProfileString
    Linux Shell 1
    YAML
    ubuntu虚拟机如何连接到windows上安装的Navicat
  • 原文地址:https://www.cnblogs.com/fjl-vxee/p/8486356.html
Copyright © 2011-2022 走看看