全屏滚动的原理是什么？用到了css的哪些属性？（笔试题）

深藏阁楼爱情的钟 2021-07-25 20:52 211阅读 0赞

在学习ES6知识点时，看到了fullpage.js，可以实现全屏滚动，也就是类似于幻灯片或者轮播图的效果。

//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>

wrap块为窗口可看到的部分，我们可以通过js获取窗口可视区的大小，并为其设置为：`overflow:hidden`属性，使得窗口不出现滚动条，只显示窗口大小的一页内容。  
设置main区域，定位为relative,通过改变main块的top属性实现不同页面的切换，具体的css代码如下：

html,body{ 
    	margin:0;
    	padding:0;
    }
    #wrap{ 
    	width:100%;
    	overflow:hidden;
    	background:#111;
    }
    #main{ 
    	width:100%;
    	background:#222;
    	position:relative;
    }
    .page{ 
    	width:100%;
    	margin:0;
    }

js代码的主要部分就是对滚动事件的函数绑定，大多数浏览器提供了`mousewheel`事件，Firefox 3.5+不支持，但支持相同作用的事件：`DOMMouseScroll`;  
`mousewheel`事件：`event.wheelDelta` 返回的如果时正值说明滚轮是向上滚动的；  
`DOMMouseScroll`事件：`event.detail` 返回的如果时负值说明滚轮是向上滚动，每页高度为 `document.body.clientHeight`\+px;  
具体代码如下：

var pages = document.getElementsByClassName('page');
    var wrap = document.getElementById('wrap');
    var len = document.documentElement.clientHeight;
    var main = document.getElementById('main');
    wrap.style.height=len+"px";
    for(var i=0;i<pages.length;i++){ 
    	pages[i].style.height=len+"px";
    }
    if(navigator.userAgent.toLowerCase().indexOf('firefox') !=-1){ 
    	document.addEventListener("DOMMouseScroll",scrollFun);
    }else if(document.addEventListener){ 
    	document.addEventListener("mousewheel",scrollFun,false);
    }else if(document.attachEvent){ 
    	document.attachEvent("onmousewheel",scrollFun);
    }else{ 
    	document.onmousewheel=scrollFun;
    }
    var startTime = 0;
    var endTime = 0;
    var now = 0;
    function scrollFun(e){ 
    	startTime = new Date().getTime();
    	var event = e || window.event;
    	var dir = event.detail || -event.wheelDelta;
    	if(startTime - endTime > 1000){ 
    		if(dir>0 && now > -3*len){ 
    			now -= len;
    			main.style.top = now + "px";
    			endTime = new Date().getTime();
    		}else if(dir<0 && now < 0){ 
    			now += len;
    			main.style.top=now+"px";
    			endTime=new Date().getTime();
    		}
    	}else{ 
    		event.preventDafault();
    	}
    }

## 注：以上内容参考其他大神代码。 ##

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是CSS CSS的工作原理

![6e50a8b91cdb26fd21630b4cfd530433.jpeg][] 什么是CSS CSS是层叠样式表(英文全称：Cascading Style Sheet

╰+哭是因爲堅強的太久メ/ 2024年04月02日 03:35/ 0 赞/ 118 阅读

相关 tomcat容器是如何创建servlet类实例的？用到了什么原理？

> 1. 当容器启动时，会读取在webapps目录下所有的web应用中的web.xml文件，然后对 xml文件进行解析，并读取servlet注册信息。然后，将每个应用中注册的

短命女/ 2024年02月17日 12:48/ 0 赞/ 26 阅读

相关什么是CSS的box-sizing属性？它有哪些取值，各有什么不同？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ CSS的box-sizing属性 ⭐ 取值 ⭐ 不同之处 ⭐ 写在最后 -----------

ゞ浴缸里的玫瑰/ 2023年10月14日 18:55/ 0 赞/ 19 阅读

相关 vue+swiper+animate.css制作全屏滚动H5

年底了，接到需求要制作年度账单，形式就是全屏滚动H5页面，翻页时给页面元素添加动画，大概效果如下： H5长翻页动画效果接下来就来介绍一下我的制作步骤； 1.安

谁践踏了优雅/ 2023年01月06日 05:59/ 0 赞/ 327 阅读

相关 javascript 实现全屏滚动

全屏滚动的过程会逐步优化，从最基本的功能开始。全屏滚动每张图都占满整个浏览器窗口，当滑动鼠标或者触摸板时，图片切换。效果可以看到，滑动鼠标或者触摸板时，

缺乏、安全感/ 2022年11月25日 00:44/ 0 赞/ 223 阅读

相关 CVTE笔试题---字符串的全排列

今天笔了cvte的实习生在线笔试题，一个感觉，基础很重要，如果没有扎实的基础，全是不定项的选择题，真的都是致命伤；下面我就编程题–字符串的全排列进行总结；当然，这道题在

爱被打了一巴掌/ 2022年09月30日 06:18/ 0 赞/ 160 阅读

相关最全Java笔试题

自己做过的总结的Java面试题，后续还会补充新的，请多多支持，一起讨论！ \-------------------------------------------------

分手后的思念是犯贱/ 2022年06月16日 10:09/ 0 赞/ 249 阅读

相关 eval是做什么的？（笔试题）

eval()的作用把字符串参数解析成JS代码并运行，并返回执行的结果例如： `eval("2+3")` //执行加运算，并返回运算值 `eval("var

短命女/ 2021年07月26日 01:23/ 0 赞/ 407 阅读

相关什么是window对象？什么是document对象？（笔试题）

BOM与DOM 对象是类的实例，是用来声明的数据结构，如果将类比作数据类型，对象就是响应数据类型的变量，在内存中分配特定的空间，存储数据。 Window对象封装了窗口标

待我称王封你为后i/ 2021年07月26日 00:33/ 0 赞/ 528 阅读

相关全屏滚动的原理是什么？用到了css的哪些属性？（笔试题）

在学习ES6知识点时，看到了fullpage.js，可以实现全屏滚动，也就是类似于幻灯片或者轮播图的效果。 //html结构 <div id="wrap">

深藏阁楼爱情的钟/ 2021年07月25日 20:52/ 0 赞/ 212 阅读