使用onmousewheel滚轮事件实现滑动上下页面效果

为什么使用onmousewheel而不是onscroll？

• onmousewheel事件在没有滚动条的时候也能触发，而onscroll需要有滚动条才能触发，且onscroll多与scrollTop一起使用

CSS：子节点使用了绝对定位absolute，改变其top来显示所需要的页面，通过transition来展示变化的过渡效果

JS： 使用onmousewheel事件（火狐浏览器也做了相应兼容），来判断滚轮是向上还是向下滚动，由此改变index（子节点索引）的top值

1）通过父元素外面在套一个div，设置overflow:hidden来截取可视内容，然后控制父元素的marginTop来显示效果（推荐）

优点：利于别的信息的展示，不会使该元素内容架空在整个页面的内容之外

2)设置父元素为fixed，子元素为absolute,控制子元素的top，来显示效果

优点：对于一些响应式，且不需要展示别的内容，只有滑动模块展示的内容，可以更好的控制

缺点：需要通过css初始化每个子元素的top值,不易于别的信息的展示，如导航栏等

成果图：