fullpage.js：使用容器内的鼠标指针滚动时禁用页面滚动

发生了什么：无论我滚动鼠标的哪个位置，滚动都可以工作。fullpage.js：使用容器内的鼠标指针滚动时禁用页面滚动

我想达到的效果：当用户使用位于特定容器内的鼠标指针滚动时，我想禁用更改页面的插件。当与相同的容器外侧的鼠标指针的用户滚动，插件的常规功能应恢复;即页面应该可以再滚动。

我试过了什么：我听了文档上的滚动事件，发现鼠标在执行滚动时是否在容器内，并将可能性存储为布尔值。

$(document).bind("mousewheel", function(event) { 
    // preventScroll = true; 
    console.log(event); 
    if($(event.target).closest(".no-scroll").length) {    
    preventScroll = true; 
    } 
    else { 
     preventScroll = false; 
    } 
});

然后onLeave我试图找出preventScroll的价值，并试图阻止事件传播（因为要停止实际事件）通过我的使用setTimeout捕捉返回false

setTimeout(function() { 
     console.log(preventScroll); 
     if(preventScroll) { 
     console.log("no-scroll") 
     return false; 
     } 
    }, 10);

的preventScroll所需的值，虽然我猜的插件会执行10 ms内滚动，这就是为什么return false似乎没有产生效果。我似乎无法弄清楚是怎么回事着手实现所需的功能。

Codepen：https://codepen.io/binarytrance/pen/YxBqPj

在此实现，我想禁用滚动容器是在第二页/部分。请注意控制台中的值。

来源

2017-09-01 snow

使用fullpage.js选项normalScrollElements。检查fullpage.js文档的更多信息：

normalScrollElements：（默认为空），如果你想避免自动滚动滚动在某些元素的时候，这是你需要使用的选项。（对地图有用，滚动的div等）它要求与jQuery选择这些元素的字符串。（例如：normalScrollElements： '＃元素1，.element2'）。此选项不应该应用于任何节/幻灯片元素本身。

来源

2017-09-03 08:59:50 Alvaro

fullpage.js：使用容器内的鼠标指针滚动时禁用页面滚动

回答

相关问题