javascript - 如何滚动到包装器中所需的 div？

Question

有以下代码：

    <div id="main">
        <div id="first">
            First item
        </div>
        <div id="second">
            Second item
        </div>
        <div id="third">
            Third item
        </div>
    </div>

CSS 样式：

    #first {
        background-color: yellow;
    }
    #second {
        background-color: blue;
    }
    #third {
        background-color: green;
    }
    html, body, #main, #first, #second, #third {
        height: 100%;
    }

主 div 中有 3 个 div，用户滚动以转到屏幕底部。我想做以下事情：当用户第一次用鼠标滚轮滚动到“第二个”div时，第二次 - “第三个”div。此功能已在以下站点上实现：一些站点。请告诉我一些建议。谢谢。

Answer 1

现场演示：http: //jsfiddle.net/xz2DN/1/

IE 更新：http : //jsfiddle.net/xz2DN/6/

（html元素被滚动，因为它body包含 css 属性overflow:hidden，这使得 IE 无法滚动）

你需要：

• 禁用网站上的滚动条
• 检测鼠标滚轮事件（在旧浏览器中不起作用）
• 在向上或向下滚动之前了解您所在的部分
• 从一个部分移动到另一部分后更新该状态

您可以尝试单独查找每个点，您将使其正常工作:)

禁用滚动条和默认滚动

body,html{
    overflow:hidden;
}

检测鼠标滚轮：

• http://www.sitepoint.com/html5-javascript-mouse-wheel/

知道我们在哪个部分

我建议您创建一个包含一对值的数组id, status。这id将是id当前部分的标签，状态将指示您是否是当前的“幻灯片”/部分。

你可以这样做：

var sections = {};
var numberSections = 0;
$('.section').each(function(index, element){
    //current slide is active
    if(!index){
        sections[$(this).attr('id')] = 1;   
    }
    else{
        sections[$(this).attr('id')] = 0;
    }
    numberSections++;
});

然后你应该定义两个函数，一个用于在用户向上滚动时移动更新数组的状态，另一个用于向下滚动的情况。