| 本文实例为大家分享了jquery实现全屏滚动的具体代码，供大家参考，具体内容如下 效果图
思路1.要全屏,给父级、body、html、高度设置为100%，自己的宽度也100%，还要给html、body设置溢出隐藏 html,body{ height:100%; /* 实现全屏 */ overflow: hidden;}.wrap{ position: relative; top: 0; left: 0; /* 实现全屏 */ height: 100%;}div.wrap>div{ width:100%;height:100%;}2.引入mousewheel在引入min.js之后 <script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script><script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script> 3.e.deltaY>0上滑 e.deltaY<0下滑 4.控制滑动一次 <script> var flag = true;if(flag){ //上滑 if(e.deltaY>0){ flag = false; } //下滑 else{ flag = false; }</script>5.让他滑起来,应该改变父级(这里是wrap的top,不是document的top,刚刚开始思路错了，他的高度应该是子级的高度*-1)，注意应该是每次滑完了才能继续滑动，所以function里面要写flag=true,为了让它不越界，要把上滑和下滑写在一个if里面，看下代码 <script> // 控制滑动一次 if(flag){ // 上滑 if(e.deltaY>0){ // 不能上滑了 if(i>0){ console.log(i) i--; flag = false; $('.wrap').animate({top:-i*hei},1000,function(){ flag=true; }) } }//下滑 else{ // 这个if让它不能让下继续滑动 if(i<4){ i++; flag = false; $('.wrap').animate({top:-i*hei},1000,function(){ flag=true; }) } } }</script>完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0;padding:0;} /* 实现全屏 */ html,body{ height:100%; overflow: hidden; } .wrap{ position: relative; top: 0; left: 0; /* 实现全屏 */ height: 100%; } div.wrap>div{ width:100%; height:100%; } div.one{ background:lightcoral; } div.two{ background:lightblue; } div.three{ background:lightseagreen; } div.four{ background:lightslategray; } div.five{ background:pink; } </style> </head> <body> <div class="wrap"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> </div> <script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script> <script> $(function(){ var flag = true; var i=0; var hei=$('.wrap>div').first().height(); $(document).mousewheel(function(e){ // 控制滑动一次 if(flag){ // 上滑 if(e.deltaY>0){ // 不能上滑了 if(i>0){ console.log(i) i--; flag = false; $('.wrap').animate({top:-i*hei},1000,function(){ flag=true; }) } }//下滑 else{ // 这个if让它不能让下继续滑动 if(i<4){ i++; flag = false; $('.wrap').animate({top:-i*hei},1000,function(){ flag=true; }) } } } }) }) </script> </body></html>总结:1.top去实现 2.记到overflow 3.上滑的top依然是负数，不是正数 4.高度和宽度要设置为100%
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
一篇文章教你学会js实现弹幕效果
微信小程序实现保存影集和图片到相册 |
