通过页面块的鼠标滚轮导航答案

【问题标题】：Mousewheel navigation through page blocks通过页面块的鼠标滚轮导航
【发布时间】：2013-07-20 02:10:12
【问题描述】：

例如我有一个包含 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 的操作。但不要看到整个情况。

我希望我的问题很清楚。非常感谢任何已经实施了此类导航的帮助和网站来挖掘它。

【问题讨论】：

标签： javascript jquery jquery-plugins mouseevent mousewheel

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

首先，您的每个块都应该有“位置：固定”。第一个块有 top: 0px;底部 0px;左0px；右 0px;虽然对于下面的块，left 和 right 仍然是 0，但是 top 和 bottom 现在偏移了窗口的高度（您可以使用 $(window).innerHeight(); 获取窗口的高度等等和以此类推与其他块。

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

干杯

【讨论】：