【问题标题】:Lock scrolling when element is at top of window, scroll through Bootstrap carousel, then continue scrolling down the page当元素位于窗口顶部时锁定滚动,滚动Bootstrap轮播,然后继续向下滚动页面
【发布时间】:2016-10-24 08:19:01
【问题描述】:

我正在创建一个网站,其想法是一旦三个部分中的每一个都与窗口顶部接触,整个页面滚动锁定,允许用户使用鼠标滚轮事件滚动引导轮播幻灯片(参见 @ 987654321@)。但是,它远非完美,而且通常一旦部分到达顶部,滚动就无法修复 - 导致它跳过整个部分。

每次滚动都会运行一个函数:

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

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

    }, 80);
})

滚动*();功能基本上检查其中一个部分是否在顶部的 10 像素内,如果是,它会将元素滚动到顶部并锁定滚动,以便用户可以向下滚动到下一张幻灯片和第三张幻灯片.在第三张幻灯片上,滚动解锁,因此他们可以继续下一部分,这真的会重复。

问题在于如何让每个部分始终锁定在顶部而不是跳过(我认为当前跳过是由于用户滚动过快并且功能没有及时运行以激活检查该部分是否在窗口顶部的 10 像素范围内),并且通常在尝试滚动到下一个部分的第三张幻灯片时,它要么粘住要么跳跃(可能是因为函数运行时滚动保持在当前部分)。

【问题讨论】:

  • 有什么办法可以澄清你的问题吗?我以为我的答案是你要找的,但显​​然是错误的。您的问题不清楚。

标签: javascript jquery html twitter-bootstrap


【解决方案1】:

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

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

并使用$.addClass()$.removeClass()$.toggleClass() 添加/删除类

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-28
    • 1970-01-01
    相关资源
    最近更新 更多