鼠标滚轮导航

Question

例如我有5块中的页：

<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 
<div class="div4"></div> 
<div class="div5"></div> 

每个块100％的宽度和窗口的高度，红一（1）是可见的。

.div1, .div2, .div3, .div4, .div5 { 
    width: 100%; 
    height: 100%; 
} 

我想用鼠标滚轮导航这些块。当我从底部向下滚动第二块动画时，第三块动画从第一块开始动画。我不希望滚动条可见。

我知道我应该使用jQuery的mousewheel插件，并选择一个行动取决于三角洲。但是看不到整个情况。

我希望我的问题很清楚。希望任何帮助和网站谁已经实施这种类型的海军挖掘它。

Answer 1

你应该使用jQuery滚动事件，如图here

$('#target').scroll(function() { 
//code goes here 
}) 

也可以隐藏滚动条，如图here

，或者你可以尝试无限滚动的插件。

Answer 2

首先，你的每个块应该有“位置：固定”。第一个块会有top：0px;底部0px; left 0px; right 0px;虽然对于下面的块，左侧和右侧仍然是0，但顶部和底部现在偏移了窗口的高度（可以用$（window）.innerHeight（）获得窗口的高度;等等和

然后，无论用户何时滚动（使用已在其他答案中给出的滚动事件），只需简单地修改所有块的顶部和底部（等于），无论您希望每次事件火灾

干杯