Pure JS full screen scrolling / full screen paging

http://blog.csdn.net/tangdou5682/article/details/52351404

Online demo

http://ftp592347.host584.zhujiwu.me/js-fullpage/index.html

Summary of knowledge points

  1. When you need to make interactive effects such as turning the mouse wheel to enlarge the page font, the mousewheel event is used. In fact, most browsers (IE6, IE7, IE8, Opera 10+, Safari 5 +), provide "mousewiheel" events. But Firefox 3.5 + doesn't support this event, but thanks to Firefox 3.5 +, there is another equivalent event: "dommousescoll"
  2. "event.wheelDelta" attribute value in mousewheel event: if it is a positive value, it means that the wheel is rolling up;
  3. Value of "event.detail" attribute in dommousescoll event: if the value returned is negative, it means that the scroll wheel is rolling upward

html code

<div id="wrap">
    <div id="main">
        <div id="page1" class="page"></div>
        <div id="page2" class="page"></div>
        <div id="page3" class="page"></div>
        <div id="page4" class="page"></div>
    </div>
</div>

css

<style type="text/css">
html,body{
    height:100%;
}
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
#wrap{
    overflow: hidden;
    width:100%;
}
#main{
    height:2944px;
    top:0;
    position: relative;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background:#E4E6CE;
}
#page2{
    background:#6CE26C;
}
#page3{
    background:#BF4938;
}
#page4{
    background:#2932E1;
}
</style>
  • javascritpt
<script type="text/javascript">
    var wrap = document.getElementById("wrap");
    var main = document.getElementById("main");
    var hei = document.body.clientHeight;
    wrap.style.height = hei + "px";
    var obj = document.getElementsByTagName("div");
    for(var i=0;i<obj.length;i++){
        if(obj[i].className == 'page'){
             obj[i].style.height = hei + "px";
        }
    }
    //If time control is not applied, the scrolling will be excessively sensitive, turning several screens at a time
    var startTime = 0, //Screen turning start time  
        endTime = 0,  
        now = 0;     
    //Browser compatible      
    if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
        document.addEventListener("DOMMouseScroll",scrollFun,false);        
    }  
    else if (document.addEventListener) {  
        document.addEventListener("mousewheel",scrollFun,false);  
    }  
    else if (document.attachEvent) {  
        document.attachEvent("onmousewheel",scrollFun);   
    }  
    else{  
        document.onmousewheel = scrollFun;  
    }  

    //Scroll event handler
    function scrollFun(event){
        startTime = new Date().getTime();  
        var delta = event.detail || (-event.wheelDelta);  
        //Value of "event.wheelDelta" attribute in mousewheel event: if it is a positive value, it means that the wheel is rolling upward
        //Value of "event.detail" attribute in dommousescoll event: if the value returned is negative, it means that the scroll wheel is rolling upward
        if ((endTime - startTime) < -1000){
            if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
                //Scroll down
                now = now - hei;
                toPage(now);
        } 
            if(delta<0 && parseInt(main.offsetTop) < 0){
                //scroll up
                    now = now + hei;
                    toPage(now);
            }
             endTime = new Date().getTime();  
        }
           else{  
                event.preventDefault();    
            }    
    }
     function toPage(now){        
         $("#main").animate({top:(now+'px')},1000);     //jquery to achieve animation effect
         //SetTimeout ("main. Style. Top = now + 'PX'", 1000); JavaScript realizes animation effect
    }   
</script>

Please read the notes and knowledge points carefully. If you have any questions or suggestions, please leave a message^

Tags: Attribute Firefox Javascript JQuery

Posted on Sat, 02 May 2020 11:06:51 -0700 by KingWylim