自己用js实现全屏滚动
Posted 这名字就是霸气
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己用js实现全屏滚动相关的知识，希望对你有一定的参考价值。
参照fullPage.js的效果，用自己的想法实现的。
实现的效果：1、全屏滚动，滚动一下齿轮就会滚动全屏。
2、自适应缩放，无论怎么改变窗口的大小，都会保证用一个元素占满全屏。
下一步计划：
1、改成react组件
2、实现更多的效果
注释写的很清楚，基本上知道函数怎么用就可以了。有想法这东西就很简单。
这里偷懒使用了我之前写过的一个运动框架（其实就是一个函数），稍加修改就可以在这上面使用。框架相关：点击这里
注释非常详细了，就不说其他的了。直接上代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 </head> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 div{ 13 width: 100%; 14 height: 100%; 15 } 16 .one{ 17 background-color: #1bbc9b; 18 } 19 .sec{ 20 background-color: #4bbfc3; 21 } 22 .thr{ 23 background-color: #7baabe; 24 } 25 </style> 26 <body> 27 <div class="full one">1</div> 28 <div class="full sec">2</div> 29 <div class="full thr">3</div> 30 </body> 31 <script> 32 //添加滚动监听 33 document.addEventListener(\'mousewheel\',wheel,false); 34 35 //判断一次滚动是是否完成 36 var isComplete = true; 37 //隐藏滚动条 38 document.body.style.overflow=\'hidden\'; 39 40 //获取滚动的元素 41 var fullList = document.getElementsByClassName("full"); 42 43 //因为是类数组对象，不是数组对象，所以只能使用call的方式来调用 44 Array.prototype.forEach.call(fullList,function(value){ 45 //获取一个网页满屏的高 46 value.style.height = window.innerHeight +\'px\'; 47 }) 48 49 //如果窗口大小改变执行的函数 50 window.onresize = function(){ 51 Array.prototype.forEach.call(fullList,function(value){ 52 value.style.height = window.innerHeight +\'px\'; 53 }); 54 55 //改变窗口大小后，应该仍是一个元素占满全屏 56 if(document.body.scrollTop % window.innerHeight) 57 { 58 isComplete = false; 59 //根据四舍五入判断滚动位置 60 let tmp = Math.round(document.body.scrollTop / window.innerHeight)* window.innerHeight; 61 62 //使用运动框架 63 showAnimate(document.body,{\'scrollTop\':tmp},function(){ 64 isComplete = true; 65 }); 66 } 67 }; 68 69 //滚动函数 70 function wheel(e){ 71 //等待上一个滚动完成 72 if(isComplete){ 73 74 //滚动进行时 75 isComplete = false; 76 77 //判断是往上滚动还是往下滚动 78 if(e.wheelDelta < 0){ 79 //要滚动到的点 80 let arrivePoint = document.body.scrollTop + window.innerHeight; 81 82 //最大的滚动点 83 let maxBottom = document.body.offsetHeight - window.innerHeight; 84 85 //如果超出了最大的滚动点，则赋值为最大滚动点 86 arrivePoint = arrivePoint > maxBottom ? maxBottom : arrivePoint; 87 88 showAnimate(document.body,{\'scrollTop\':arrivePoint},function(){ 89 isComplete = true; 90 }); 91 }else{ 92 let arrivePoint = document.body.scrollTop - window.innerHeight; 93 94 //最小滚动点为0 95 arrivePoint = arrivePoint < 0 ? 0 :arrivePoint; 96 showAnimate(document.body,{\'scrollTop\':arrivePoint},function(){ 97 isComplete = true; 98 }); 99 } 100 } 101 } 102 /** 103 *函数作用：执行动画 104 *接受参数：obj（需要运动的DOM元素） 105 * json（需要改变的属性集合，json格式） 106 * fn（回调函数） 107 */ 108 function showAnimate(obj,json,fn){ 109 clearInterval(obj.timer); 110 //表示运动是否都已经停止 111 var flag = true; 112 obj.timer=setInterval(function(){ 113 //循环json 114 for(var i in json){ 115 if(i == \'opacity\'){ 116 //获取透明度值，round四舍五入去除小数点 117 var icur = Math.round(parseFloat(getStyle(obj,i))*100); 118 } 119 else{ 120 //获取属性值 121 var icur = parseInt(getStyle(obj,i))||obj[i]; 122 } 123 //缓冲运动，speed随时变换 124 var speed = (json[i]-icur)/10;//千万要写在定时器里面，写在外面会有意想不到的后果 125 speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);//速度向上或者下取整，防止到不了over位置 126 //如果有一个没到达终点就是false 127 if(json[i] !== icur){ 128 flag = false; 129 }else{ 130 flag = true; 131 } 132 if(i == \'opacity\'){ 133 obj.style.filter = \'alpha(opacity:\'+(icur+speed)+\')\';//IE兼容 134 obj.style.opacity = (icur+speed)/100; 135 }else if(obj[i]||obj[i] == 0){ 136 obj[i] = icur + speed; 137 } 138 else{ 139 obj.style[i] = icur+speed+\'px\'; 140 } 141 console.log(icur + \' \' + json[i]); 142 } 143 //检查是否所有的运动都已经停止 144 if(flag){ 145 clearInterval(obj.timer); 146 if(fn){ 147 fn(); 148 } 149 } 150 },13); 151 } 152 /** 153 *函数作用：返回样式属性值 154 *接受参数：obj（需要获取属性的DOM元素） 155 * attr（需要获取的属性名称） 156 */ 157 function getStyle(obj,attr) 158 { 159 if(obj.currentStyle) 160 { 161 return obj.currentStyle[attr];//IE兼容 162 } 163 else 164 { 165 return getComputedStyle(obj,false)[attr]; 166 } 167 } 168 </script> 169 </html>
以上是关于自己用js实现全屏滚动的主要内容，如果未能解决你的问题，请参考以下文章