Question

我正在创建一个网站，这个想法就像三个部分中的每个部分都与窗口顶部联系一样，整个页面滚动锁定允许用户使用鼠标滚轮事件滚动Bootstrap Carousel幻灯片（参见{ {3}}）。然而，它并不是接近完美的地方，并且一旦某个部分到达顶部时滚动通常无法修复 - 导致它跳过整个部分。

每个滚动都会运行一个函数：

$(window).scroll(function(){
    setTimeout(function (){

        scrollExploration();
        scrollCross();
        scrollConception();

    }, 80);
})

滚动*（）;函数基本上检查其中一个部分是否位于顶部的10个像素内，如果是，它会将元素滚动到顶部并锁定滚动，以便用户可以向下滚动到下一张幻灯片和第三张幻灯片。一旦进入第三张幻灯片，滚动解锁就可以进入下一部分，这真的会重演。

问题在于弄清楚如何让每个部分始终锁定到顶部而不是跳过（我认为如果用户滚动得太快并且函数没有及时运行则会导致跳过检查该部分是否在窗口顶部的10个像素范围内），并且通常当在试图滚动到下一个部分的第三个幻灯片上时，它会粘住或跳跃（可能是因为函数在运行时）滚动保持当前部分。）

Answer 1

您可以根据需要添加/删除此类来禁用滚动

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

使用$.addClass()，$.removeClass()或$.toggleClass()

添加/删除课程

当元素位于窗口顶部时锁定滚动，滚动Bootstrap轮播，然后继续向下滚动页面

1 个答案: