通过页面块导航鼠标滚轮

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插件并选择一个取决于delta的动作。但是没有看到整个情况。

我希望我的问题很明确。非常感谢已经实施此类导航的任何帮助和网站。

Answer 1

您应该使用jquery滚动事件，如here

所示

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

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

所示

或者您可以尝试无限滚动插件。

Answer 2

首先，每个块都应该有“position：fixed”。第一个块有顶部：0px;底部0px;离开0px;对0px;虽然对于下面的块，左边和右边仍然是0，但是顶部和底部现在被窗口的高度偏移（你可以用$（window）获得窗口的高度.innerHeight（）;依此类推与其他街区一样。

然后，只要用户滚动（使用其他答案中已经给出的滚动事件），您只需在每次事件触发时按照您想要的数量修改所有块的顶部和底部（相同）。

干杯