当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。这是html代码：

1  2  3      4         
      5          6         
      7      8      9         
     
      10             
      
       
屏幕1
      
11             
      
       
屏幕2
      
12             
      
       
屏幕3
      
13             
      
       
屏幕4
      
14             
      
       
屏幕5
      
15         
     
16         
     
      17             
      
1
18             
      
2
19             
      
3
20             
      
4
21             
      
5
22         
     
23         24     25 

这里是css结构代码：

1 *{
   margin:0; padding:0;} 2 html,body{ 3     width:100%; 4     height:100%; 5     overflow:hidden; 6 } 7 .big-box { 8     width:100%; 9     height:500%;10     text-align:center;11     position:absolute;12 }13 .big-box .item{14     height:20%;15 }16 .big-box .item1 {17     background-color:red;18 }19 .big-box .item2 {20     background-color:blue;21 }22 .big-box .item3 {23     background-color:purple;24 }25 .big-box .item4 {26     background-color:gold;27 }28 .big-box .item5 {29     background-color:pink;30 }31 .controls {32     list-style:none;33     position:absolute;34     top:20%;35     right:20px;36 }37 .controls li {38     width:50px;39     height:50px;40     font:bold 22px/50px "宋体";41     text-align:center;42     background-color:#000;43     color:#fff;44     cursor:pointer;45 }46 .controls li+li {47     margin-top:5px;48 }49 .controls li.active {50     background-color:#fff;51     color:red;52 }

这里是JavaScript代码：

1 /* 2     思路： 3         第一步：当页面加载完后，获取所要操作的节对象 4         第二步：为document添加一个滚轮滚动事件 5         第三步：滚轮滚动切换 6             获取当前浏览器可视区域的高度 7             var viewHeight = document.body.clientHeight 8             滚轮切换的目的：就是更改bigBox的top值 9             top:最大010             top:最小  viewHeight*-411             从上到下或从下到上：最多走4次(5个页面)   每一次走viewHeight12             控制的关键点：索引  定一个索引   213             滚轮↓14                 索引+115             滚轮↑16                 索引-117             bigBox.style.top = -索引*viewHeihgt       18 */19 var bigBox = document.getElementById("bigBox");//获取bigBox节点对象20 var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象21 var viewHeight = document.body.clientHeight;//获取当前页面高度22 var flag = true;//设置开关23 var index = 0;//设置索引24 25 //封装事件,兼容浏览器26 function on(obj,eventType,fn){27     if(obj.addEventListener){28         obj.addEventListener(eventType, fn);29     }else{30         obj.attachEvent("on" + eventType, fn);31     }32 }33 //鼠标滚动事件处理函数34 function handler(e){35     var _e = window.event || e;36     if(flag){37         flag = false;38         if(_e.wheelDelta==120 || _e.detail==-3){
   //如果鼠标滚轮向上滚动，detail为火狐判断条件39             index--;40             if(index<0){41                 index = 0;42             }43         }else{
   //向下滚动44             index++;45             if(index>lis.length-1){
   //如果索引大于页面数，就是滚到最后一张页面时，再滚动鼠标页面不再滚动46                 index = lis.length-1;47             }48         }49         bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面50         for(var i=0; i

笔者在这里进行了html，css和javascript的分离，读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明，方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现，纯javascript技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。