Javascript 如何在包装器中滚动到所需的div？

有以下代码：

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

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

现场演示：

IE更新：

（

html

元素被滚动，因为

body

包含css属性

overflow:hidden

，因此无法滚动IE）

您需要：

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

您可以尝试通过单独的搜索来查找这些点，您将使其正常工作：）

禁用滚动条和默认滚动

body,html{
    overflow:hidden;
}

检测鼠标滚轮：

了解我们在哪个部门

我建议您使用一对值创建一个数组

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++;
});

---

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

@bayfrontconsulting这比滚动的元素数量可变时要复杂一些。嗯。。。我认为你的例子对我没有帮助。我知道如何通过菜单捕捉点击并设置动画到所需的点。我不知道如何捕捉鼠标的滚动并将其动画化到下一个/上一个div。有一些库可以做到这一点……@Бааааааааааааа1072。希望能有帮助。

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++;
});