码迷，mamicode.com
首页 > 其他好文 > 详细

全屏滚动的原理及实现

时间：2018-05-27 12:23:12      阅读：280      评论：0      收藏：0      [点我收藏+]

标签：htm   padding   tail   get   class   -name   ntb   static   tool   

之前用fullpage插件做过全屏滚动的页面，今天用js自己实现了一下，还蛮简单的技术分享图片.

首先html结构为

 

[html] view plain copy
 
  1. <div id="wrap">  
  2.     <div id="main">  
  3.         <div id="page1" class="page"></div>  
  4.         <div id="page2" class="page"></div>  
  5.         <div id="page3" class="page"></div>  
  6.         <div id="page4" class="page"></div>  
  7.     </div>      
  8. </div>  

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

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

 

[css] view plain copy
 
  1. html,body{  
  2. margin: 0;  
  3. padding: 0;  
  4. }  
  5. #wrap{  
  6.     width: 100%;  
  7.     overflow: hidden;  
  8.     background: #ccc;  
  9. }  
  10. #main{  
  11.     width: 100%;  
  12.     background: #ccc;  
  13.     position: relative;  
  14. }  
  15. .page{  
  16.     width:100%;  
  17.     margin:0;  
  18. }  
  19. #page1{  
  20.     background:#E4E6CE;  
  21. }  
  22. #page2{  
  23.     background:#6CE26C;  
  24. }  
  25. #page3{  
  26.     background:#BF4938;  
  27. }  
  28. #page4{  
  29.     background:#2932E1;  
  30. }  

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

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

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

具体代码如下：

 

[javascript] view plain copy
 
  1. var pages = document.getElementsByClassName("page");  
  2. var wrap = document.getElementById("wrap");  
  3. var len = document.documentElement.clientHeight;  
  4. var main = document.getElementById("main");  
  5. wrap.style.height = len + "px";  
  6. for(var i=0; i<pages.length; i++){  
  7.     pages[i].style.height = len + "px";  
  8. }  
  9. if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
  10.     document.addEventListener("DOMMouseScroll",scrollFun);  
  11. }else if(document.addEventListener){  
  12.     document.addEventListener("mousewheel",scrollFun,false);  
  13. }else if(document.attachEvent){  
  14.     document.attachEvent("onmousewheel",scrollFun);  
  15. }else{  
  16.     document.onmousewheel = scrollFun;  
  17. }  
  18. var startTime = 0;  
  19. var endTime = 0;  
  20. var now = 0;  
  21. function scrollFun(e){  
  22.     startTime = new Date().getTime();  
  23.     var event = e || window.event;  
  24.     var dir = event.detail || -event.wheelDelta;  
  25.     if(startTime - endTime > 1000){  
  26.         if(dir>0 && now > -3*len){  
  27.             now -= len;   
  28.             main.style.top = now +"px";  
  29.             endTime = new Date().getTime();  
  30.         }else if(dir<0 && now < 0){  
  31.             now += len;  
  32.             main.style.top = now +"px";  
  33.             endTime = new Date().getTime();  
  34.         }  
  35.     }else{  
  36.         event.preventDefault();      
  37.     }  
  38. }  

全屏滚动的原理及实现

标签：htm   padding   tail   get   class   -name   ntb   static   tool   

原文地址：https://www.cnblogs.com/mm2015/p/9095212.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！