现在的网站有的时候为了简洁就是很多的单页滑屏滚动介绍，主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面，简单的实现第一种页面。
html代码:
第一页 博客园-flyelephant
第二页
第三页
第四页

页面样式:
html, body { height: 100%; padding: 0px; margin: 0px; } .container { height: 100%; overflow: hidden; } .wrapper { height: 100%; touch-action: none; transition: all 1000ms ease; } .page { height: 100%; width: 100%; } .page0 { background: #551a8b; } .page1 { background: #ff8247; } .page2 { background: #cd919e; } .page3 { background: #98fb98; }
鼠标滑动控制代码，如果需要获取鼠标的滚轮事件可以直接通过javascript，也可以通过query.mousewheel.min.js插件来写,原生态的js:
/** this is high-level function. * it must react to delta being more/less than zero. */function handle(delta) { if (delta < 0) …; else …;}/** event handler for mouse wheel event. */function wheel(event){ var delta = 0; if (!event) /* for ie. */ event = window.event; if (event.wheeldelta) { /* ie/opera. */ delta = event.wheeldelta/120; } else if (event.detail) { /** mozilla case. */ /** in mozilla, sign of delta is different than in ie. * also, delta is multiple of 3. */ delta = -event.detail/3; } /** if delta is nonzero, handle it. * basically, delta is now positive if wheel was scrolled up, * and negative, if wheel was scrolled down. */ if (delta) handle(delta); /** prevent default actions caused by mouse wheel. * that might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventdefault) event.preventdefault(); event.returnvalue = false;}/** initialization code. * if you use your own event management code, change it as required. */if (window.addeventlistener) /** dommousescroll is for mozilla. */ window.addeventlistener('dommousescroll', wheel, false);/** ie/opera. */window.onmousewheel = document.onmousewheel = wheel;
通过javascript插件控制控制滚动的代码:

关于滚轮的时间的控制，以及不确定页面元素时候的代码没有给出判断，大体思路不变，其他的仅供参考~