纯JS 全屏滚动 / 整屏翻页

2016年08月29日 11:17:59

在线演示

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

知识点总结

  1. 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll”
  2. mousewheel事件中的 “event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动;
  3. DOMMouseScroll事件中的 “event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动

html代码

<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";
        }
    }
    //如果不加时间控制,滚动会过度灵敏,一次翻好几屏
    var startTime = 0, //翻屏起始时间  
        endTime = 0,  
        now = 0;     
    //浏览器兼容      
    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;  
    }  

    //滚动事件处理函数
    function scrollFun(event){
        startTime = new Date().getTime();  
        var delta = event.detail || (-event.wheelDelta);  
        //mousewheel事件中的 “event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动
        //DOMMouseScroll事件中的 “event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动
        if ((endTime - startTime) < -1000){
            if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
                //向下滚动
                now = now - hei;
                toPage(now);
        } 
            if(delta<0 && parseInt(main.offsetTop) < 0){
                //向上滚动
                    now = now + hei;
                    toPage(now);
            }
             endTime = new Date().getTime();  
        }
           else{  
                event.preventDefault();    
            }    
    }
     function toPage(now){        
         $("#main").animate({top:(now+'px')},1000);     //jquery实现动画效果
         //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果
    }   
</script>

请认真看注释和知识点,有什么问题或建议,欢迎留言^V^

原生 js 实现全屏滚动效果

原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度              2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。 废话不多说,直接上代码 html...
  • yinkaihui
  • yinkaihui
  • 2016年04月16日 20:28
  • 6922

js 实现 纵向全屏幕滚动效果

  • 2014年05月29日 11:21
  • 185KB
  • 下载

[JS插件] Swiper:强大的触摸滑动&整屏滚动插件

关于Swiper原文地址:http://www.swiper.com.cn/ Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端...
  • xjtarzan
  • xjtarzan
  • 2016年01月06日 17:38
  • 9537

全屏整屏滚动组件fullPage

  • 2015年03月31日 17:23
  • 20KB
  • 下载

js--整页滚动

一:查询事件 onresize:改变窗口大小触发事件 类数组对象:不是由Array构造函数所创建的,但是依然呈现出数组的行为document.getElementsByTagName()语句返回的就是...
  • juzipidemimi
  • juzipidemimi
  • 2017年06月09日 16:10
  • 173

总结--原生js实现整屏滚动及其交互效果

新手一枚,发现最近蛮流行鼠标整屏幕滚动作为基础的交互效果。 还不会用框架- -尝试着用JS+CSS写了 希望大家多多指点 需求: 当用户每滑动一次鼠标时,屏幕相应的向上/下/左/右 移动一个屏幕大小 ...
  • weixin_37585123
  • weixin_37585123
  • 2017年03月26日 17:04
  • 243

[JS插件] pageSwitch 适合移动端整屏滚动效果的使用教程

pageSwitch 是一款可以整屏滚动的js插件,可以设置多种切换效果,手机上也能很好的实现。 代码出处:https://github.com/qiqiboy/pageSwitch...
  • xjtarzan
  • xjtarzan
  • 2016年01月05日 14:05
  • 5648

全屏滚动的原理及实现

之前用fullpage插件做过全屏滚动的页面,今天用js自己实现了一下,还蛮简单的. 首先html结构为 ...
  • Rita_jing
  • Rita_jing
  • 2017年10月14日 20:52
  • 850

全屏滚动,微场景,H5全屏切换滚动页面制作的方法介绍

很多人找了很久,都没找到一款好用的H5全屏滚动插件,而H5全屏滚动又是一个常用的技术,常用于移动端的营销推广,虽然现在有很多类似易企秀之类的合成软件,除了数据没法对接到自己平台之外,收集用户数据也有被...
  • xyphf
  • xyphf
  • 2016年07月25日 11:53
  • 5958

Js(JQuery)实现滚动到底部加载更多(翻页)

$(window).scroll(function () { var scrollTop = $(this).scrollTop();        var scrollHeight = $(do...
  • Elite_1989
  • Elite_1989
  • 2015年10月13日 10:57
  • 3056
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯JS 全屏滚动 / 整屏翻页
举报原因:
原因补充:

(最多只允许输入30个字)